Bootstrap responsive grid changing order of columns when displayed on mobile with rows?
responsive-design, twitter-bootstrap, twitter-bootstrap-3
Solution
See this question
`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.
- (Desktop) Larger view-ports get pushed and pulled.
- (Mobile) Smaller view-ports render in normal order.
DEMO
<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|
Problem
``` ---------------------- A | B | C ---------------------- ``` when scaled to mobile I will expect: ``` ------- B ------- A ------- C ``` Is it possible with new in Bootstrap3 `push` option? I was trying ``` <div class="row"> <div class="col-xs-12 col-sm-3 col-sm-push-6" style="background-color:red"> A </div> <div class="col-xs-12 col-sm-6 cols-sm-pull-3 no-col-padding"> <center> B </center> </div> <div class="col-xs-12 col-sm-3" style="background-color:pink"> C </div> </div> ```