Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 963
user2982964 Avatar asked Nov 12 '13 12:11

user2982964


People also ask

How do I change the order of columns in Bootstrap 3?

By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.

How do I change the order of columns in Bootstrap?

We can easily change the order of built-in grid columns with push and pull column classes. The Push and Pull Classes: The push class will move columns to the right while the pull class will move columns to the left.

How do I change the order of divs in Bootstrap 4?

Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12 , responsively such as order-md-12 order-2 (last on md , 2nd on xs ) relative to the parent . row . It's also possible to change column order using the flexbox direction utils...

How do I move a div from left to right in Bootstrap?

Answer: Use the justify-content-between Class You can simply use the class . justify-content-between in combination with the class . d-flex to left align and right align text content within a <div> container in Bootstrap 4.


1 Answers

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.

like image 92
Sean Ryan Avatar answered Oct 12 '22 00:10

Sean Ryan