Bootstrap 3 – Push and Pull

3d Animation

I haven’t had to use the push/pull functionality of Bootstrap for ages so this is just a note to myself to remind me how to do it!

Basically, the push/pull function allows you to re-order columns and blocks in Bootstrap 3. It’s particularly useful where you want to swap around two columns – eg. a column containing an image and a column containing text when you switch resolutions.

The first important rule is to order the columns in code how you want them to appear at the lowest resolution first.

The code below will swap columnOne and colummTwo around at Medium Resolution (tablet landscape)

At Small Resolution (tablet portrait) – columnOne appears first before columnTwo

Bootstrap 3 – Re-ordering Collums at Different Resolutions


<div id="columnOne" class="col-sm-12 col-md-6 col-md-push-6">
Pushes columnOne to the right</div>

<div id="columnTwo" class="col-sm-12 col-md-6 col-md-pull-6">
Pulls columnTwo to the left </div>