Bootstrap: reordering divs using pull-right, pull-left / 3 columns

Question

I’ve been working on this all day, but I 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 he looks at on big screens:

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

What should look like on smaller screens:

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

What it looks like now:

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

I think this is just a simple floating point problem. But I experienced almost all the possibilities.

Answer 1

Bootstrap 3

Using Bootstrap 3 Mesh:

 <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 up two columns that will remain in place regardless of screen resolution ( col-xs-* ).

Then we divide the larger right column into two columns that will fall apart on devices with tablet sizes and below ( col-md-* ).

Finally, we shift the display order using the corresponding class ( col-md-[push|pull]-* ). You click on the first column for a second and pull out the second for the first.

Answer 2

Try it...

 <div class="row"> <div class="col-xs-3"> Menu </div> <div class="col-xs-9"> <div class="row"> <div class="col-sm-4 col-sm-push-8"> Right content </div> <div class="col-sm-8 col-sm-pull-4"> Content </div> </div> </div> </div> 

Bootply