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.
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.
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.
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...
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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With