I want to have 2 divs besides each other for col-md and higher, while having them above each other for col-sm and lower. So I tried to use the push and pull feature as mentioned in the docs but somehow it's not working. What I'm trying to do is get the RIGHT div above the LEFT div on col-sm and lower, basically reversing the order.
What am I doing wrong?
<div class="container">
<div class="row">
<div class="col-sm-12 col-sm-push-12 col-md-7">LEFT</div>
<div class="col-sm-12 col-sm-pull-12 col-md-5">RIGHT</div>
</div>
</div>
Here's a fiddle: https://jsfiddle.net/ko7euh77/1/
You just need to think "mobile-first"..
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-push-7 col-md-5">RIGHT</div>
<div class="col-sm-12 col-md-pull-5 col-md-7">LEFT</div>
</div>
</div>
Demo: http://www.codeply.com/go/2SN4r7KGwV
Bootstrap 4 Update
The push pull class are now order-* (using flexbox) in Bootstrap 4.
https://www.codeply.com/go/l3BOOH6JM9
<div class="row">
<div class="col-md-5 order-md-2">
<div class="card card-body">RIGHT</div>
</div>
<div class="col-md-7 order-md-1">
<div class="card card-body">LEFT</div>
</div>
</div>
It totally depends on the version you are using, for bootstrap 4 and above you can push and pull like this:
one more thing here order doesn't mean to the grid of the scree it will be the no.
<div class="row">
<div class="col-sm-2 order-md-2 order-sm-1" >
<div >RIGHT</div>
</div>
<div class="col-sm-10 order-md-1 order-sm-2 ">
<div >LEFT</div>
</div>
</div>
Here are the bootstrap docs for further reading
Related
I can't figure out how to get the required result using Bootstrap 4 grid.
This is how the part of the site looks in desktop mode. 2, 3 and 6 are images while the rest are text.
This is how the same site should look like in mobile.
the HTML is:
<section class="col-12">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-6 order-2 order-sm-1">
<divclass="row">
<div class="col-12">
<p></p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 order-1 order-sm-2">
<img src=""/>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-6">
<img src=""/>
</div>
<div class="col-12 col-sm-6">
<div class="row">
<div class="col-12">
<p></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-6 order-2 order-sm-1">
<div class="row">
<div class="col-12">
<p></p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 order-1 order-sm-2">
<img src=""/>
</div>
</div>
</div>
</div>
</section>
Here is a link to the project: https://rohithandique.github.io/Rare-Monk-Website/ and for 4,5,6 in the css, I put:
position: relative;
top: -25%;
to get the desired result. but it leaves a wide gap in the bottom. So how do I change my Bootstrap classes to get the desired result? I am a beginner.
EDIT: Tried all solutions and found out that using CSS grid gave more flexibility in this situation as the positioning of HTML elements were fixed and bootstrap 4 doesn't allow such mixing.
You should use CSS Grid a modern API that replaces flex and older CSS stuff. You can achieve whatever layout you want. Keep in mind that is bidimensional.
It's the best you can get. Easy to learn.
Hey please try to use bootstrap fluid container in these way you will get the desired result you want for example.look up to the link https://getbootstrap.com/docs/3.4/css/
Bootstrap's grid are
display:flex
flex-direction:column
you cant style them that way you will have to use custom css for it !!!!
its as simple as that.
Actually I have a layout build with one row class and two column by using bootstrap grid system.
Now I need to add another one item inside that grid system but I'm unable to position it properly inside the layout as it's going under all other columns.
As you can see on the screenshot
As you can see the third column I'm trying to add goes under all other while I would to place it in the red rectangle position
The layout is build as the following:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 mb-4 mt-1"></div>
<div class="col-md-8 mb-4 mt-1"></div>
</div>
</div>
I was trying to add something like that to put the 3rd column but the result was as described above
<div class="container-fluid">
<div class="row">
<div class="col-md-4 mb-4 mt-1"></div>
<div class="col-md-8 mb-4 mt-1"></div>
<div class="col align-self-start"><div>
</div>
</div>
You should use the following approach
<div class="container-fluid">
<div class="row">
<!-- There will be column with 2 right box -->
<div class="col-md-4">
<div class="row">
<div class="col-md-12 mb-4 mt-1">
</div>
<div class="col-md-12">
ITEM UNDER 1ST BOX
</div>
</div>
</div>
<!-- This will be your larger left box -->
<div class="col-md-8">
<div class="row">
<div class="col-md-12 mt-1">
</div>
</div>
</div>
</div>
</div>
I have such code:
<div class="row inner">
<div class="col-md-6 col-sm-12 col-xs-12">
<h1>image is here...</h1>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h2>Add</h2>
<div class="row">
<h3>text1</h3>
<p><span>BlaBlaBla1</span></p>
</div>
<div class="row">
<h3>text2</h3>
<p><span>BlaBlaBla2</span></p>
</div>
</div>
</div>
and so it looks like on mobile:
link
but i need that my second column appears on the top on mobile (not on the bottom)...
can i achieve it somehow without changing html code?
plunker: https://plnkr.co/edit/BKPhHxbZO0VQnubblh7f?p=preview
If using bootstrap why not just add push and pull classes? If you do not want to modify the markup you could do this javascript also. Why would you not want to modify the markup?
<div class="row inner">
<div class="col-md-6 col-md-push-6">
<h2>Add</h2>
<div class="row">
<h3>text1</h3>
<p><span>BlaBlaBla1</span></p>
</div>
<div class="row">
<h3>text2</h3>
<p><span>BlaBlaBla2</span></p>
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<h1>image is here...</h1>
</div>
</div>
edit
Also, If you want to right align something in bootstrap for a particular media query add it to the stylesheet. So on mobile it would be text-align: right and on your next media to reset it you can add text-align: left
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
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
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>
I'm having a question for Bootstrap 3 pull and push column ordering. I made a simple image to explain my problem. On the left side is the lg and md version of my grid. On the right hand side, how it should look like in sm.
after finding out (thanks to #Danko) that Bootstrap has push and pull options I did following:
<div class="col-lg-6 col-md-6 col-sm-8"></div>
<div class="col-lg-6 col-md-6 col-sm-8 col-sm-push-8"></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-sm-pull-8"></div>
<div class="col-lg-3 col-md-3 col-sm-4 col-sm-pull-8"></div>
But I can't get it to work. First of all, all columns are shifted weird on all other breakpoints than sm but also on sm one of the green boxes disappear.
Did I get something wrong with the logic of pull and push? Really need some help!
In this case there is no way to get what you want with push/pull unless you create custom media queries. A better way may be to use the Bootstrap utility classes to create 2 separate versions of your markup. 1 for md/lg and 1 for xs/sm
<div class="row hidden-md hidden-lg">
<div class="col-xs-8 col-md-6"> </div>
<div class="col-xs-4 col-md-6"> </div>
<div class="col-xs-4 col-md-6"> </div>
<div class="col-xs-8 col-md-6"> </div>
</div>
<div class="row hidden-xs hidden-sm">
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
<div class="col-md-3"> </div>
<div class="col-md-3"> </div>
</div>
http://www.bootply.com/876ukbaHyW
This question may be old but I found a solution using visible and hidden instead of using push and pull because it could not be done unless custom media queries as mentioned by Skelly and I have also used some of the codes from Skelly
<div class="row">
<div class="col-sm-9 col-md-6 O"></div>
<div class="col-md-6 visible-md visible-lg B"></div>
<div class="col-sm-3 G"></div>
<div class="col-sm-3 G"></div>
<div class="col-sm-9 hidden-md hidden-lg B"></div>
</div>
Used back Skelly's bootply bootply.com/y9N6cXjYSQ and replace this code with the existing one.