3

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

Isabella
  • 67
  • 2
  • 11
  • I know you said your tried it but adding col-sm-push-6 to the top div and col-sm-pull-6 to the bottom div should work exactly how you want it. – Benneb10 Dec 17 '15 at 21:22
  • When I do it like this, they do swap but in not in mobile view. I'm working on my laptop and on laptop view they are swapped but when I'm re-sizing the browser to approximately smallest view the are not swopped. – Isabella Dec 17 '15 at 21:33
  • Take a look at this, try the opposite (design for mobile) and swap them on desktop http://stackoverflow.com/questions/21933664/bootstrap-3-push-pull-columns-only-on-smaller-screen-sizes – Benneb10 Dec 17 '15 at 21:42
  • Have you tried col-xs-push-6 and col-xs-pull-6 to target small devices? – justincron Dec 17 '15 at 21:44

2 Answers2

2

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

JacobG182
  • 329
  • 1
  • 6
1

You can use a trick by visible class:

<div class="row">
<div class="col-md-6 col-sm-6 visible-lg visible-md">
A (Visible-lg & md)
</div>
<div class="col-md-6 col-sm-6">
B
</div>
<div class="col-md-6 col-sm-6 visible-sm visible-xs">
A (Visible-sm & xs)
</div>
</div>
eylay
  • 1,712
  • 4
  • 30
  • 54