Controls Shifted after Displaying Error - css

Question

This is very embarrassing, but I am having a hard time getting it to display correctly. The form below has several controls which display correctly without validation message. However, the controls are shifted when I display the validation's error message; they are all over the place. After reading the bootstrap document and doing quite a bit of searching only, I played around with the clearfix and tried display table with no success. What can I do to prevent the controls from shifting after display a validation message?
Here is the HTML being used.
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">First Name:</p> <label aria-hidden="true" for="FirstName">First Name:</label>
#Html.TextBoxFor(mbox => mbox.FirstName, new { #class = "form-control", id = "FirstName" })
<span id="FirstNameError" class="error" aria-live="assertive" style="display:block; padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Middle Name:</p> <label for="middleName" aria-hidden="true">Middle Name:</label>
#Html.TextBoxFor(m => m.MiddleName, new { #class = "form-control", id = "middleName" })
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Last Name:</p> <label for="LastName" aria-hidden="true">Last Name:</label>
#Html.TextBoxFor(m => m.LastName, new { id = "LastName", #class = "form-control" })
<span id="LastNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Department:</p><label for="Department" aria-hidden="true">Department:</label>
#Html.TextBoxFor(m => m.Department, new { #class = "form-control", id = "Department" })
<span id="DepartmentError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Office Number:</p><label for="OfficeNumber" aria-hidden="true">Office Number:</label>
#Html.TextBoxFor(mbox => mbox.OfficeNumber, new { id = "OfficeNumber", #class = "form-control" })
<span id="OfficeNumberError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Extension:</p> <label aria-hidden="true" for="Extension">Extension:</label>
#Html.TextBoxFor(mbox => mbox.Extension, new { id = "Extension", #class = "form-control" })
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">User Name:</p> <label for="UserName" aria-hidden="true">User Name</label>
#Html.TextBoxFor(m => m.UserName, new { id = "UserName", #class = "form-control" })
<span id="UserNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Password:</p><label for="Password" aria-hidden="true">Password:</label>
#Html.PasswordFor(m => m.Password, new { id = "Password", #class = "form-control" })
<span id="PasswordError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Email Address:</p><label for="emailAddress" aria-hidden="true">Email Address:</label>
#Html.TextBoxFor(m => m.EmailAddress, new { id = "emailAddress", #class = "form-control" })
<span id="EmailAddressError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Practitioner</p><label for="Practitioner" aria-hidden="true">Practitioner:</label>
#Html.DropDownListFor(mbox => mbox.PractitionerID, new SelectList(Model.availablePractitioners, "ID", "FullName"), new { id = "Practitioner", #class = "form-control" })
<span id="PractitionerError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Active:</p><label for="Active" aria-hidden="true">Active:</label>
#Html.CheckBoxFor(m => m.Active, new { id = "Active", #class = "form-control", #checked = "checked" })
</div>
</div>
</div>

Answer 1

After posting the question, I realized that wrapping a group of 3 controls inside a col-xs-12 will prevent them from shifting.
<div class="col-xs-12">
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">First Name:</p> <label aria-hidden="true" for="FirstName">First Name:</label>
#Html.TextBoxFor(mbox => mbox.FirstName, new { #class = "form-control", id = "FirstName" })
<span id="FirstNameError" class="error" aria-live="assertive" style="display:block; padding-left:120px;"></span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Middle Name:</p> <label for="middleName" aria-hidden="true">Middle Name:</label>
#Html.TextBoxFor(m => m.MiddleName, new { #class = "form-control", id = "middleName" })
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<p class="sr-only">Last Name:</p> <label for="LastName" aria-hidden="true">Last Name:</label>
#Html.TextBoxFor(m => m.LastName, new { id = "LastName", #class = "form-control" })
<span id="LastNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
</div>
</div>
</div>