Separate push, pull, offset for Large and Small grids

Created by: jtickle

There is a discussion going on about this, but I had to fix the problem to get our theme working with Bootstrap 3.

If you're going to have multiple grids, you have to do pushes, pulls, and offsets for both grids separately. I really don't see a way around this. Consider the following:

<!-- Inside a container, row -->
<div class="col-lg-5 col-sm-4">
    Some Text
</div>
<div class="col-lg-5 col-sm-4 col-push-2">
    Some More Text
</div>
<div class="col-lg-2 col-sm-4 col-pull-5">
    Corporate Logo
</div>

(also available as a fiddle)

This is going on the traditional "info bar" at the bottom of every page, look at the bottom of any modern web page to see what I'm talking about. On tablet and large screens, I want the corporate logo to be centered. On the tablet, the logo can be a little bigger, because I'm going to hide some of the text in the info boxes.

However, there is currently no way whatsoever to specify that the pushing and pulling is different on the small grid. If the small grid is set to the same as the large grid (col-lg-5, col-sm-5, col-push-2) of course it works just fine. But if the grid changes for tablets, then push, pull, and offset all break miserably.

With this patch, you can change the above code to:

<!-- Inside a container, row -->
<div class="col-lg-5 col-sm-4">
    Some Text
</div>
<div class="col-lg-5 col-push-2 col-sm-4 col-sm-push-4">
    Some More Text
</div>
<div class="col-lg-2 col-pull-5 col-sm-4 col-sm-pull-4">
    Corporate Logo
</div>

Classes get a bit cluttered, but honestly I see no other way to do this.