Changing column order while stacking them on mobile (bootstrap)

Question

I am currently having two columns like this:

<div class='row'>
    <div class='col-sm-7'>foo</div>
    <div class='col-sm-5'>blah</div>
</div>

I would like them to stack up this way on mobile : [5] above [7] I tried the following :

<div class='row'>
    <div class='col-sm-7 col-push-7'>foo</div>
    <div class='col-sm-5 col-pull-5'>blah</div>
</div>

Unfortunately, it is not working, it still appears as being: [7] above [5] on mobile.

What am I missing ?

Possible duplication - http://stackoverflow.com/questions/18057270/column-order-manipulation-using-col-lg-push-and-col-lg-pull-in-twitter-bootstrap — Luís P. A., May 12 '15 at 15:55
Are your divs contained within a parent element? If so, what is it? — Shaggy, May 12 '15 at 16:06

score 0 · Answer 1 · answered May 12 '15 at 16:13

You could use flexbox to reverse the order of the child items, like so:

.row{
    display:flex;
    flex-flow:row wrap-reverse;
    width:100%;
}
.row>div{
    flex:1 0 100%;
}

<div class="row">
    <div class="col-sm-7">foo</div>
    <div class="col-sm-5">blah</div>
</div>

Note that, depending on the browser support you're aiming for, you may need to prefix some of the properties and/or values above. See canisuse.com's compatibility table for more information.

Changing column order while stacking them on mobile (bootstrap)

1 Answers1