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

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.