Responsive Design Breaking point Messed up - angularjs

Question

I have a form that is collecting a user's personal information. I've started to add control to the form using bootstrap grid. I am having issue when I reach certain breaking point. For example, 768 and 781px, one of the control will be out of place. Then, it will fall back into place at 782px and work fine. I have 3 separate css files, but they don't have anything at the moment. How do I handle it when the control as is the case between 768 and 781px?
html file
<div class="row">
<div class="form-group">
<label for="FirstName" class="col-xs-12 col-sm-2 col-md-2 label-control">First Name:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" id="FirstName" name="FirstName" class="form-control"/>
</div>
<label for="middleName" class="col-xs-12 col-sm-2 col-md-2 label-control">Middle Name:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" class="form-control" name="middleName" id="middleName" />
</div>
<label for="lastName" class="col-xs-12 col-sm-2 col-md-2 label-control">Last Name:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" class="form-control" name="lastName" id="lastName" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"></div>
<div class="form-group">
<label for="FirstName" class="col-xs-12 col-sm-2 col-md-2 label-control">Sex:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<select id="Sex" name="Sex" class="form-control">
<option>Select Sex</option>
</select>
</div>
<label for="middleName" class="col-xs-12 col-sm-2 col-md-2 label-control">DOB:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" class="form-control" name="DOB" id="DOB" />
</div>
<label for="lastName" class="col-xs-12 col-sm-2 col-md-2 label-control">Race:</label>
<div class="col-xs-12 col-sm-4 col-md-2">
<select id="Race" name="Race" class="form-control">
<option>Select Race</option>
</select>
</div>
</div>
</div>
#media only screen and (min-device-width:768px) and (max-device-width:1024px){
}
#media only screen and (min-device-width:1024px) {
}
When the screen is less than 768px
The screen is between 768 and 781 px; the lastName field is out of place
Screen is 782px or more

Answer 1

Right So your question was wired, Ive tided up your code abit (not fully otherwise you wont learn) The form is now responsive from big screens down to phones.
You will see that I have only used col-md-xx to achieve the look you want. If you want something changes just pop a comment and ill be glad to do it for you
<div class="container">
<div class="row">
<div class="form-group">
<label for="FirstName" class="col-md-2 label-control">First Name:</label>
<div class="col-md-4">
<input type="text" id="FirstName" name="FirstName" class="form-control"/>
</div>
<label for="middleName" class="col-md-2 label-control">Middle Name:</label>
<div class="col-md-4">
<input type="text" class="form-control" name="middleName" id="middleName" />
</div>
<label for="lastName" class="col-md-2 label-control">Last Name:</label>
<div class="col-md-4">
<input type="text" class="form-control" name="lastName" id="lastName" />
</div>
</div>
<div class="col-md-12"></div>
<div class="form-group">
<label for="middleName" class="col-md-2 label-control">DOB:</label>
<div class="col-md-4">
<input type="text" class="form-control" name="DOB" id="DOB" />
</div>
<label for="FirstName" class="col-md-2 label-control">Sex:</label>
<div class="col-md-4">
<select id="Sex" name="Sex" class="form-control">
<option>Select Sex</option>
</select>
</div>
<label for="lastName" class="col-xs-12 col-md-2 label-control">Race:</label>
<div class="col-xs-12 col-md-2">
<select id="Race" name="Race" class="form-control">
<option>Select Race</option>
</select>
</div>
</div>
</div>
</div>