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>
Related
Arranging DIV is easy using bootstarp grid system, but some time its not achievable for me,
I think it's not very complex and achieve without using extra DIV or code but my junk brain is not capable of achieve this grid deisgn,
Thanks
Try this layout:-
<div class="row">
<div class="col-lg-2 col-3"></div>
<div class="col-lg-8 col-6">
<div class="row">
<div class="col-lg-3 col-12"></div>
<div class="col-lg-3 col-12"></div>
<div class="col-lg-6 col-12">
<div class="row">
<div class="col-lg-6 col-6"></div>
<div class="col-lg-6 col-6"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-3"></div>
</div>
This site may help you to create what you want.
Is there a way to stack a various number of divs in multiple rows when theres not enough space to show them in a single row?
So what I mean is, imagine you have 20 divs but only 5 fit in the first row. Then there should be 4 rows with 5 items.
On the other hand when we only have 3 items then there should only be one row with 3 items.
Flexbox makes this easy. Have a look here.
The Bootstrap has 12 columns per rows. You can nest columns/rows but not recommend that you nest containers.
With that being said, you can have up to 12 columns per row. To control how it is 'stacked' you classify which type of columns it belongs to. See the demo.
https://codepen.io/pkshreeman/pen/LLYZqm
Resize the window, and you will see what it does for different settings.
Hope this helps.
This is the code used in demo:
<div class="container">
<div class="row">
<div class="col-md-6"> col-md-6 </div>
<div class="col-md-6"> col-md-6 </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div>
<div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div>
<div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
</div>
</div>
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
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.
I'm new to Bootstrap and i have a six columns contact form, when I'm looking it on my smartphone i see the button on top, or in general i see the order in revers to what i need, this is the code:
i see samples of push,
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
but how to do it with six columns?
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div1</div>
<div class="col-sm-12 col-md-6" >div2</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div3</div>
<div class="col-sm-12 col-md-6" >div4</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div5</div>
<div class="col-sm-12 col-md-6" >div6</div>
</div>
</div>
how can i reverse the ordering
What you are doing is much simpler when written with right way in Bootstrap.
Try the following snippet:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4">div1</div>
<div class="col-md-2 col-sm-4">div2</div>
<div class="col-md-2 col-sm-4">div3</div>
<div class="col-md-2 col-sm-4">div4</div>
<div class="col-md-2 col-sm-4">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
</div>
</div>
When on medium size screen the divs will show in a single line, but when you go on small screen, then will stack up to show 3 divs in a row, when you go on extra small screen the divs will stack up to show only one in a row.
Try this and inform me, if you are able to achieve the right layout or not.
Updated Code:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div1</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div2</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div3</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div4</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
<div class="col-md-2 col-sm-4 visible-xs">div5</div>
<div class="col-md-2 col-sm-4 visible-xs">div4</div>
<div class="col-md-2 col-sm-4 visible-xs">div3</div>
<div class="col-md-2 col-sm-4 visible-xs">div2</div>
<div class="col-md-2 col-sm-4 visible-xs">div1</div>
</div>
</div>
You can't reverse the order but you can use some extra divs to achieve this functionality. Lets take extra 5 divs below 6th div and put them in reverse order. These divs will only show up on mobile screen. At the same time hide the above 5 divs at mobile screen. So now on mobile screen you are seeing divs in reverse order.
As users in comments said, please move your CSS to external .css file, that way it it easier to read and help,
Please use Plunkr or similar so people can better understand your question.
Try removing dir=rtl from outer div,
also you might want to read about Twitter Bootstrap's Helper Classes
This is a simple bootstrap grid example,
where on 'xs' screen each div will take 6 (1/2) of available space.
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-6">.col-md-1</div>
<div class="col-sm-4 col-xs-6">.col-md-2</div>
</div>
</div>
see this plunkr for example