How to make nested Div wrap instead of overlap? - html

Question

I'm using Bootstrap's grid system. I have 3 divs inside a "row", and inside each of those divs are nested controls.
When I horizontally decrease the browser size, the 2nd and 3rd div in the row are overlapping the 1st div. I want them to wrap, not overlap.
How can I achieve this?
Here is my code:
<!-- SEARCH CONTROLS -->
<div class="row">
<!-- Left side search boxes and search button -->
<div class="col-xs-5">
<div class="article" id="SAorPIList">
<select style="min-width: 215px; max-width: 300px;" class="col-xs-4 form-control" data-bind="value: selectedSAPIValue, options: saorpi, optionsText: 'Name', optionsValue: 'CmeTypeId', optionsCaption: 'Select SA or PI'"></select>
</div>
<div class="col-xs-5" style="padding-top: 20px;">
<select style="max-width: 300px;" class="specialties-class form-control" name="Name" id="SpecialtyId"></select>
</div>
<div class="col-xs-5" style="max-width: 150px; padding-top: 20px; padding-left: 175px;">
<button id="btnDropDownsSearch" class="btn btn-search collapsed" type="button">
<i class="icon-search"></i>
</button>
</div>
</div>
<!-- The world "OR" in the center of the page -->
<div class="col-xs-2" style=" padding-left: 75px; padding-top:50px;">
<strong style="display:inline;">OR</strong>
</div>
<!-- Right side search box -->
<div class="col-xs-5 pull-left" style="padding-bottom: 50px; min-width:400px;">
<span><strong style="text-align:left;">Activity Search</strong></span>
<div class="col-xs-4 input-group pull-left input-group-lg" style="padding-top:50px;">
<input id="txtFreeformSearch" class="form-control" type="search" style="min-width:175px;" />
<div class="input-group-btn">
<button id="btnFreeformSearch" class="btn btn-search collapsed" type="button">
<i class="icon-search"></i>
</button>
</div>
</div>
</div>
</div>

Answer 1

When you say, you nesting controls to div; Do you mean somethink like this?
.row > div {
background: lightgrey;
border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-md-4</div>
</div>

Answer 2

I solved this by defining min-width inside a good number of the tags.
This allowed the DIVs to wrap in PC, tablet, and mobile formats.
I would post the resulting HTML, but I think it would affect too few readers to make it worthwhile. I say this because there is a knockout control and select2 control within the HTML, and some of their UI properties are defined in javascript.