Bootstrap 4, how reverse the order of columns?
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.
Easiest solution will be:
.row{
flex-direction: row-reverse;
}