Solution using existing Bootstrap CSS to clear floats on responsive grids

Created by: cfarquharson

Per #8810 (closed) and #9402 (closed) , the solution is actually already possible with your code.

Just use class="clearfix visible-*" to force clearing of grids

Demo here: http://jsfiddle.net/cfarquharson/JSWar/1/

It might be good to add this to the documentation as this will likely come up over and over as developers realize the height of their content will affect the layout of their responsive grids if they swap grid widths for different resolutions.

Example:

<section class="row">
    <section class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
       ...
    </section>
    <section class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
        ...
    </section>
    <div class="clearfix visible-xs"></div>
    <div class="clearfix visible-sm"></div>
    <section class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
         ...
    </section>
    <section class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
         ...
    </section>
</section>