Here is the HTML code I am working with:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@*@Html.LabelFor(s => s.BasicInfo.FirstName)*@<label>First Name:</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@Html.TextBoxFor(s => s.BasicInfo.FirstName)
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@*@Html.LabelFor(s => s.BasicInfo.LastName)*@<label>Last Name:</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@Html.TextBoxFor(s => s.BasicInfo.LastName)
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@*@Html.LabelFor(s => s.BasicInfo.City)*@<label>City:</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@Html.TextBoxFor(s => s.BasicInfo.City)
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@*@Html.LabelFor(s => s.BasicInfo.State)*@<label>State:</label>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
@Html.TextBoxFor(s => s.BasicInfo.State)
</div>
</div>
After testing in IE and Firefox, it seems that the layout only works correctly for "xs", "md", and "lg" sizes, but encounters issues with the "sm" size. Interestingly, removing the <label> tag resolves the issue for all sizes. Is there a problem with this combination of HTML/Razor/CSS? I have tried researching online for similar issues with placing other HTML elements within a column, but haven't found any related problems. Unfortunately, my attempted screenshots were not visible, so I had to remove them.