If you've spent any time working with bootstrap templates, or the new Bootstrap grid system in BS3, you've probably seen markup with the col-x grid classes, for example a two column layout:

view plain print about
1<div class="container">
2<div class="row">
3<div id="primary" class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
4</div>
5<div id="sidebar" class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
6</div>
7</div>
8</div>

This will result in a two column layout on large screens, with the proportions shifting for "sm" or small screens, and stacked columns on "xs" or extra-small screens.

While amazingly simple to use once you get the hang of it, maintaining this code is messy and can be both a visual and mathematical challenge when working in a multi-column layout.

Continued...