I'm currently experiencing irregular column wrapping behavior with Bootstrap. Some columns that wrap in my row are floated to the top of the container as opposed to below the previous element.
According to Bootstrap docs:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
For example, I have:
<div class="container-fluid">
<div class="row first">
<div class="col-sm-6 col-md-3">
Col 1
</div>
<div class="col-sm-6 col-md-3">
Col 2
</div>
<div class="col-sm-6 col-md-3">
Col 3
</div>
<div class="col-sm-6 col-md-3">
Col 4
</div>
<div class="col-sm-6 col-md-4">
Col 5
</div>
<div class="col-sm-6 col-md-4">
Col 6
</div>
<div class="col-sm-12 col-md-4">
Col 7
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Panel
</div>
</div>
</div>
And the last column is behaving what I thought would be incorrect according to the docs. When you resize the viewport in the following example here, you can see that the 7th column has irregular behavior for small viewports. The column seems to fill the width/height of the parent element.
Is there an out-of-the-box way to fix this with bootstrap? Feel like I'm overlooking markup but I'm going cross-eyed at the moment...
I think your problem has to do with the fact the col-*-12 bootstrap classes don't float.
You can either add a float: left to your 7th column with col-sm-12 or you can add a clearfix before the col only visible at the breakpoint where it becomes 12 (sm).
like this:
<div class="col-sm-6 col-md-4">
Col 6
</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-12 col-md-4">
Col 7
</div>
you can see this fiddle
but doing this might be cleaner:
<div class="col-xs-12 col-md-4 pull-left">
Col 7
</div>
here is a demo of that solution.
You can run into a lot of issues when overloading rows, so its usually recommended to avoid it as much as you can and wrap things in .rows.