Swap 2 column stacking order at small scrn- Bootstrap push pull class or float fix?

Question

No matter what I do I can\'t get the right column to push over and stack first at 100% width/small scrns. I tried col-xs-pull/push-12 or col-xs-pull/push-0. I also tried messing

Answer 1

i use this in mobile - swap col

/* SET order of DIV */
@media only screen and (max-width:991px) {
    .order {
        display:-webkit-flex;
        display:flex;       
        flex-direction:column;
        -webkit-flex-direction:column;
    }
    .order .ord1 {
        order:1;-webkit-order:1;

    }
    .order .ord2 {
        order:2;-webkit-order:2;
    }
    .order .ord3 {
        order:3;-webkit-order:3;
   }
    .order .ord4 {
        order:4;-webkit-order:5;
    }
}

.

 <div class="container-fluid">
    <div class="row order">
        <div class="ord2 col-xs-12 col-md-3">Last</div>
        <div class="ord1 col-xs-12 col-md-3">First</div>
    </div>
</div>

Answer 2

If you go with a "mobile first" approach, you put the r-column first in your marking and then use push/pull accordingly

<div class="row">
 <div id="r-column" class="col-xs-12 col-sm-push-8 col-sm-4">right</div>
 <div id="main" class="col-xs-12 col-sm-pull-4 col-sm-8">main</div>
</div>

http://www.bootply.com/121630