I have 3 columns which I want to order in different ways on desktop and mobile.
Currently, my grid looks like this:
<div class="row">
<div class="col-xs-3 col-md-6">
1
</div>
<div class="col-xs-3 col-md-6">
2
</div>
<div class="col-xs-6 col-md-12">
3
</div>
</div>
In the mobile view I want to have the following output:
1-3-2
Unfortunately I don't get how to solve this with the .col-md-push-* and .col-md-pull-* classes in Bootstrap 4.
2021 - Bootstrap 5
The responsive ordering classes are now order-first, order-last and order-0 - order-5
Demo
2018 - Bootstrap 4
The responsive ordering classes are now order-first, order-last and order-0 - order-12
The Bootstrap 4 **push** **pull** classes are now `push-{viewport}-{units}` and `pull-{viewport}-{units}` and the `xs-` infix has been removed. To get the desired 1-3-2 layout on mobile/xs would be: [Bootstrap 4 push pull demo](http://www.codeply.com/go/OmrcmepbUp) (This only works pre 4.0 beta)
Bootstrap 4.1+
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.
<div class="container">
<div class="row">
<div class="col-3 col-md-6">
<div class="card card-body">1</div>
</div>
<div class="col-6 col-md-12 order-2 order-md-12">
<div class="card card-body">3</div>
</div>
<div class="col-3 col-md-6 order-3">
<div class="card card-body">2</div>
</div>
</div>
</div>
Demo: Change order using order-* classes
Desktop (larger screens):
Mobile (smaller screens):
It's also possible to change column order using the flexbox direction utils...
<div class="container">
<div class="row flex-column-reverse flex-md-row">
<div class="col-md-8">
2
</div>
<div class="col-md-4">
1st on mobile
</div>
</div>
</div>
Demo: Bootstrap 4.1 Change Order with Flexbox Direction
Older version demos
demo - alpha 6
demo - beta (3)
See more Bootstrap 4.1+ ordering demos
Related
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns
A-C-B A-B-C
This can also be achieved with the CSS "Order" property and a media query.
Something like this:
#media only screen and (max-width: 768px) {
#first {
order: 2;
}
#second {
order: 4;
}
#third {
order: 1;
}
#fourth {
order: 3;
}
}
CodePen Link: https://codepen.io/preston206/pen/EwrXqm
even this will work:
<div class="container">
<div class="row">
<div class="col-4 col-sm-4 col-md-6 order-1">
1
</div>
<div class="col-4 col-sm-4 col-md-6 order-3">
2
</div>
<div class="col-4 col-sm-4 col-md-12 order-2">
3
</div>
</div>
</div>
I'm using Bootstrap 3, so i don't know if there is an easier way to do it Bootstrap 4 but this css should work for you:
.pull-right-xs {
float: right;
}
#media (min-width: 768px) {
.pull-right-xs {
float: left;
}
}
...and add class to second column:
<div class="row">
<div class="col-xs-3 col-md-6">
1
</div>
<div class="col-xs-3 col-md-6 pull-right-xs">
2
</div>
<div class="col-xs-6 col-md-12">
3
</div>
</div>
EDIT:
Ohh... it looks like what i was writen above is exacly a .pull-xs-right class in Bootstrap 4 :X Just add it to second column and it should work perfectly.
Since column-ordering doesn't work in Bootstrap 4 beta as described in the code provided in the revisited answer above, you would need to use the following (as indicated in the codeply 4 Flexbox order demo - alpha/beta links that were provided in the answer).
<div class="container">
<div class="row">
<div class="col-3 col-md-6">
<div class="card card-block">1</div>
</div>
<div class="col-6 col-md-12 flex-md-last">
<div class="card card-block">3</div>
</div>
<div class="col-3 col-md-6 ">
<div class="card card-block">2</div>
</div>
</div>
Note however that the "Flexbox order demo - beta" goes to an alpha codebase, and changing the codebase to Beta (and running it) results in the divs incorrectly displaying in a single column -- but that looks like a codeply issue since cutting and pasting the code out of codeply works as described.
You can do two different container one with mobile order and hide on desktop screen, another with desktop order and hide on mobile screen
Related
if we use bootstrap 3, we can write
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12">
</div>
<div>
but how to do the same in bootstrap 4? I tried with <div class="col-6 col-12"> but it only works as col-lg-12 (full width). I need to use same div with different classes like in BS3, in BS4. how can I do that?
Your example in BS3:
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12">
</div>
<div>
BS4 version:
<div class="row">
<div class="col-md-6">
</div>
<div>
In the above code below medium devices, it will be full width (12 cols) as that's the default.
In medium-sized devices and above it will be 6 cols wide.
You can use col-12 col-md-6 as your classes.
Unfortunately Bootstrap in Beta version drops push-* and pull-*classes, so I don't have idea how to reorder columns in xs and sm devices from:
[column_1] [column_2] [column_3]
to:
[column_1][column_3]
[column_2]
Any ideas?
There are new Reordering helper classes.
Place the divs in HTML as you want them to appear in mobile:
<div class="container">
<div class="row">
<div class="col-6 col-md-4">
[column_1]
</div>
<div class="col-6 col-md-4 order-md-12">
[column_3]
</div>
<div class="col-6 col-md-4 order-md-1">
[column_2]
</div>
</div>
</div>
[column_1] will stay first and unordered. Reorder [column_3] with .order-md-12(will be last for md-size and up) and [column_2] .order-md-1(will be first for md-size and up)
Check jsfiddle
I have this simple scenario:
<div class="row">
<div class="col-md-12 col-lg-6 col-xl-7">A</div>
<div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>
basically if md
A
B
I would like it, if md
B
A
I have tried many variants found on web, like flex-first and whatnot.. can't seem to get it to work
Any ideas?
If you want to change order on md and larger sizes you can use order-md-, this is provided by bootstrap. It looks like, if you want to change order only on md size you will have to define normal order on one larger size Fiddle
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 order-md-2">A</div>
<div class="col-md-12 order-md-1">B</div>
</div>
It's also possible to use the flex- helper classes to solve this issue.
This solution allows you to reverse the order without the order count on the columns.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-column-reverse flex-lg-row">
<div class="col-md-12 col-lg-6 col-xl-7">A</div>
<div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>
The flex-direction is now reversed by default (md) and will be overriden on the lg breakpoint.
For Bootstrap v4.1 you can use
<div class="row flex-row-reverse">
<div class="col-md-12 col-lg-6 col-xl-7">A</div>
<div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>
More information here: https://getbootstrap.com/docs/4.1/utilities/flex/#direction
Easiest solution will be:
.row{
flex-direction: row-reverse;
}
This works for me:
<div class="col-md order-1">First column</div>
<div class="col-md order-md-1">Second column</div>
Output on responsive state:
Second column
First column
I know the question is about Bootstrap 4, but I saw some people asking how to do it in version 5. Here's the example:
<div class="col-md-6 order-2 order-md-1">
<!-- YOUR CODE -->
</div>
<div class="col-md-6 order-1 order-md-2">
<!-- YOUR CODE -->
</div>
ref: https://getbootstrap.com/docs/5.0/layout/columns/#order-classes
For Bootstrap 5, the class names have changed to order-x where x is the order, i.e. (directly from the docs):
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
See more at https://getbootstrap.com/docs/5.0/layout/columns/#reordering
I have a Bootstrap layout that I would like to create but I can't figure out how I would accomplish it. Basically, on desktop sizes the layout will be a 4-column, a 6-column and a 2-column next to each other in that order, and then mobile I would like for the 4 and the 2-column to remain next to each other and for the 6-column to drop below.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-8 col-sm-4">
A
</div>
<div class="col-sm-6">
B
</div>
<div class="col-xs-4 col-sm-2">
C
</div>
<div class="clearfix"></div>
</div>
</div>
So on mobile I want "A" and "C" to be inline and "B" to be a full 12-columns below "A" and "C"
You can do it with regular bootstrap push and pull and don't need to rely on absolute positioning. See bootstrap docs here: http://getbootstrap.com/css/#grid-column-ordering
Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.
You could try something like this: - as long as this container is relatively poisitioned, it should be fine.
https://jsfiddle.net/znwsk6fw/
<div class="container">
<div class="row">
<div class="col-xs-8 col-sm-4">
A
</div>
<div class="col-sm-6 col-md-6 col-xs-12 ">
B
</div>
<div class="col-xs-4 col-sm-2 col-md-2 column_c">
C
</div>
<div class="clearfix"></div>
</div>
</div>
#media screen and (max-width:768px) {
.column_c {
position:absolute;
right:0;
}
}
Hello I am trying to do what the title says, but in a small screen (like my phone) the 12 columns don't fit on the row.
I have also tried this on Foundation but the results are the same.
Example:
<div class="container">
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-1">2</div>
<div class="col-xs-1">3</div>
<div class="col-xs-1">4</div>
<div class="col-xs-1">5</div>
<div class="col-xs-1">6</div>
<div class="col-xs-1">7</div>
<div class="col-xs-1">8</div>
<div class="col-xs-1">9</div>
<div class="col-xs-1">10</div>
<div class="col-xs-1">11</div>
<div class="col-xs-1">12</div>
</div>
</div>
Or here on the file I am working on:
Edit: no loger true since I fixed it.
Is this the expected behavior? Can this be fixed, and if so what would be the best way?
That's because the space between divs. Add this CSS to your "row" div:
.no-gutter > [class*='col-xs-']{padding-right: 0; padding-left: 0}
In html:
<div class="row no-gutter">
...