- <div class="col-xs-12 col-sm-8 col-lg-8">.col-xs-12 .col-lg-8</div>
- <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-lg-4</div>
+ <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
+ <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
+ </div>
+ <div class="row">
+ <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+ <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+ <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+ </div>
+
+ <hr>
+
+ <h3>Column clearing</h3>
+ <p>Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.</p>
+ <div class="row">
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+
+ <!-- Add the extra clearfix for only the required viewport -->
+ <div class="clearfix visible-xs"></div>
+
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>