Why is my Bootstrap push & pull divs not working?

Question

I want to have 2 divs besides each other for col-md and higher, while having them above each other for col-sm and lower. So I tried to use the push and pull feature as mentioned in the docs but somehow it's not working. What I'm trying to do is get the RIGHT div above the LEFT div on col-sm and lower, basically reversing the order.

What am I doing wrong?

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-sm-push-12 col-md-7">LEFT</div>
    <div class="col-sm-12 col-sm-pull-12 col-md-5">RIGHT</div>
  </div>
</div>

Here's a fiddle: https://jsfiddle.net/ko7euh77/1/

Answer 1

You just need to think "mobile-first"..

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-push-7 col-md-5">RIGHT</div>
    <div class="col-sm-12 col-md-pull-5 col-md-7">LEFT</div>
  </div>
</div>

Demo: http://www.codeply.com/go/2SN4r7KGwV

---

Bootstrap 4 Update

The push pull class are now order-* (using flexbox) in Bootstrap 4.

https://www.codeply.com/go/l3BOOH6JM9

<div class="row">
    <div class="col-md-5 order-md-2">
        <div class="card card-body">RIGHT</div>
    </div>
    <div class="col-md-7 order-md-1">
        <div class="card card-body">LEFT</div>
    </div>
</div>