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>
EDIT: BELOW IS THE ANSWER FOR THE OFFICIAL RELEASE v3.0
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 lgx = 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.
- (Desktop) Larger view-ports get pushed and pulled.
- (Mobile) Smaller view-ports render in normal order.
<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
View-port < sm
|B| |A| |C|
EDIT: BELOW IS THE ANSWER FOR v4.0
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)
- This can also be grid tier specific
<div class="row"> <div class="col order-2">1st yet 2nd</div> <div class="col order-1">2nd yet 1st</div> </div>