Bootstrap change div order with pull-right, pull-left on 3 columns

Question

I’ve been working on this the whole day but don’t come up with a solution. I have 3 columns in one row in a container.

1: right content – pull-right

2: navigation – pull-left

3: main content

What it looks on big screens:

------------------------------------------------ |   Menu  |      Content      |  Right Content | ------------------------------------------------ 

What it should look like on smaller screens:

---------------------------- |  Menu  |  Right Content  | |        |------------------ |        |  Content        | ---------------------------- 

What it looks like now:

------------------ | Right Content  | ------------------ | Menu | Content | ------------------ 

I think it’s just a simple floating problem. But I tried out nearly all possibilities.

Answer 1

Bootstrap 3

Using Bootstrap 3's grid system:

<div class="container">   <div class="row">     <div class="col-xs-4">Menu</div>     <div class="col-xs-8">       <div class="row">         <div class="col-md-4 col-md-push-8">Right Content</div>         <div class="col-md-8 col-md-pull-4">Content</div>       </div>     </div>   </div> </div> 

Working example: http://bootply.com/93614

Explanation

First, we set two columns that will stay in place no matter the screen resolution (col-xs-*).

Next, we divide the larger, right hand column in to two columns that will collapse on top of each other on tablet sized devices and lower (col-md-*).

Finally, we shift the display order using the matching class (col-md-[push|pull]-*). You push the first column over by the amount of the second, and pull the second by the amount of the first.