Как поменять порядок элементов на мобильном разрешение экрана в bootstarp 4 используя order?

Question

[qwerty1234421]

Когда у сайта становится мобильное разрешение последний div должен поменятся местами с первым div'om

<div class="col-12	col-sm-12	col-md-6	col-lg-4 col-xl-2 box">
        <div><img src="1.png" alt=""></div>
        <p>Первое преимущество</p>
      </div>
      <div class="col-12	col-sm-12	col-md-6	col-lg-4 col-xl-2">
        <div><img src="2.png" alt=""></div>
        <p>Второе преимущество</p>
      </div>
      <div class="col-12	col-sm-12	col-md-6	col-lg-4 col-xl-2"> 
        <div><img src="3.png" alt=""></div>
        <p>Третье преимущество</p>
      </div>

Стать вот так

<div class="col-12	col-sm-12	col-md-6	col-lg-4 col-xl-2 box">
        <div><img src="1.png" alt=""></div>
        <p>Третье преимущество</p>
      </div>
      <div class="col-12	col-sm-12	col-md-6	col-lg-4 col-xl-2">
        <div><img src="2.png" alt=""></div>
        <p>Второе преимущество</p>
      </div>
      <div class="col-12	col-sm-12	col-md-6	col-lg-4 col-xl-2"> 
        <div><img src="3.png" alt=""></div>
        <p>Первое преимущество </p>
      </div>

Answer 1

[Алекс Глебов]

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

<!-- responsive variations -->
<div class="col order-sm-3">Ordered column</div>
<div class="col order-md-3">Ordered column</div>
<div class="col order-lg-3">Ordered column</div>
<div class="col order-xl-3">Ordered column</div>

https://hackerthemes.com/bootstrap-cheatsheet