Column ordering bootstrap

Question

I have a bootstrap layout like this:

<div class="row">
    <div class="col-md-2">
    1
    </div>
    <div class="col-md-8">
    2
    </div>  
    <div class="col-md-2">
    3
    </div>
</div>

It looks like this:

1 2 3

On mobile device, column 1 is on top, which is what I want, but then I want 3 column to appear the second and then 2 column to be third.

Is this possible?

Answer 1

You can use the classes defined by bootstrap (https://getbootstrap.com/docs/4.1/utilities/flex/#order) like below

.row > div {
 border:2px solid;
 text-align:center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-2 order-0 order-md-0">
      1
    </div>
    <div class="col-md-8 order-2 order-md-1">
      2
    </div>
    <div class="col-md-2 order-1 order-md-2">
      3
    </div>
  </div>
</div>