I'm now reading documentation on Twitter Bootstrap 3, and tried to follow column ordering as shown in this page but hit the wall. I don't understand why such a code works nor how to correctly specify the setting. What I want to show is one grid, which is consisted of length 5, and the other length 5, and finally one length 2 grid.
So mine is something like this:
[5] [5] [2]
And what I want to achieve is, when it's viewed on Desktop the layout above is displayed, but when it's viewed on mobile, I want to show the second length 5 object first, then the first length 5 object, and finally the length 2 object, vertically. Like this:
[5] (second)
[5] (first)
[2]
While I tried to follow the step explained in the above documentation, I got the first length 5 object over the second one despite being on mobile platforms, which as I said should display second length 5 object on the top. In other words, I got this:
[5] (first)
[5] (second)
[2]
So how can I correctly put the second one over the first? Or since I use the same length object, could the column ordering not work?
Here's my code for your information:
<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>
Also, the documentation doesn't clarify what pull
or push
means. So am I missing something?
Thanks.
This answer is in three parts, see below for the official release (v3 and v4)
I couldn't even find the col-lg-push-x or pull classes in the original files for RC1 i downloaded, so check your bootstrap.css file. hopefully this is something they will sort out in RC2.
anyways, the col-push-* and pull classes did exist and this will suit your needs. Here is a demo
<div class="row">
<div class="col-sm-5 col-push-5">
Content B
</div>
<div class="col-sm-5 col-pull-5">
Content A
</div>
<div class="col-sm-2">
Content C
</div>
</div>
Also see This blog post on the subject
col-vp-push-x
= push the column to the right by x number of columns, starting from where the column would normally render -> position: relative
, on a vp or larger view-port.
col-vp-pull-x
= pull the column to the left by x number of columns, starting from where the column would normally render -> position: relative
, on a vp or larger view-port.
vp = xs, sm, md, or lg
x = 1 thru 12
I think what messes most people up, is that you need to change the order of the columns in your HTML markup (in the example below, B comes before A), and that it only does the pushing or pulling on view-ports that are greater than or equal to what was specified. i.e. col-sm-push-5
will only push 5 columns on sm
view-ports or greater. This is because Bootstrap is a "mobile first" framework, so your HTML should reflect the mobile version of your site. The Pushing and Pulling are then done on the larger screens.
<div class="row">
<div class="col-sm-5 col-sm-push-5">
Content B
</div>
<div class="col-sm-5 col-sm-pull-5">
Content A
</div>
<div class="col-sm-2">
Content C
</div>
</div>
View-port >= sm
|A|B|C|
View-port < sm
|B|
|A|
|C|
With v4 comes flexbox and other changes to the grid system and the push\pull classes have been removed in favor of using flexbox ordering.
.order-*
classes to control visual order (where * = 1 thru 12).order-md-*
.order-first
(-1) and .order-last
(13) avalable<div class="row">
<div class="col order-2">1st yet 2nd</div>
<div class="col order-1">2nd yet 1st</div>
</div>