How can I reverse the order of columns in Bootstrap 4?
CssBootstrap 4Css Problem Overview
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?
Css Solutions
Solution 1 - Css
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>
Solution 2 - Css
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.
Solution 3 - Css
Easiest solution will be:
.row{
flex-direction: row-reverse;
}
Solution 4 - Css
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
Solution 5 - Css
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
Solution 6 - Css
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
Solution 7 - Css
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