How can I reverse the order of columns in Bootstrap 4? - css

Question

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?

Answer 1

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>

Answer 2

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.

Answer 3

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

Answer 4

Easiest solution will be:
.row{
flex-direction: row-reverse;
}

Answer 5

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

Answer 6

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

Answer 7

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