Bootstrap responsive grid changing order of columns when displayed on mobile with rows?

Question

----------------------
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>

Answer 1

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|