Bootstrap push and pull columns

Bootstrap col-lg-push-8 and col-lg-pull-8 had me stumped for a while. Until I realised that the number after the push and pull are number of columns to subtract (pull) or add (push).

Example (and now with less obvious column counts):

<div class="row">
  <div class="col-sm-7 col-md-2">COL1</div>
  <div class="col-sm-1 col-md-1">COL2</div>
  <div class="col-sm-4 col-md-1 col-md-push-8">COL3 or COL4</div>
  <div class="col-sm-12 col-md-8 col-md-pull-1">2ndROW or COL3</div>

The example above will produce two rows on small devices with the first 3 diffs on the first row, and the forth div on the second row. But on larger devices, the second row disappears and is inserted as the 3 column, moving the third column tot the end. So the third is always at the end. The col-md-push-8 pushes it past the fourth div by pushing it 8 columns to the right, which happens to the width of the fourth div; the col-md-pull-1 pulls the fourth div past the third one which has width 1 on medium devices.

Note that you can push and pull things on top of each other that way. Think small devices first and build your interface from there. Then go to larger devices, set up the column widths for all diffs and at the end push and pull them into place.

Leave a Reply

Your email address will not be published. Required fields are marked *