Swapping divs with bootstrap

Question

I have been reading a lot of questions and answers here about swapping, rearranging and replacing divs using bootstrap, but I couldn't solve my problem.

I have two divs that contain more divs in it.

One div(A) is on the right side and another on the left(B).

In desktop and tablet view they are set one next to another AB. When on mobile view I want A to be under B.

  <div class="container">

   <div class="row">
     <div class="col-md-6 col-sm-6">
        A
     </div>
     <div class="col-md-6 col-sm-6">
        B
     </div>
   </div>

  </div>

I have tried with pull and push but it didn't work. Any help will be appreciated. Thanks

Answer 1

Here is one solution that did the trick for me:

<div class="container">
<div class="row">
    <div class="col-md-6 col-sm-6 col-lg-6 col-push-6">
        Content B
    </div>
    <div class="col-md-6 col-sm-6 col-lg-6 col-pull-6">
        Content A
    </div>
</div>
</div>

SEE WORKING EXAMPLE HERE

Read more on Bootstrap ordering here