Layout. How to swap columns on a smartphone

For a catalog, you may need to display filters on the right, but in mobile view, filters should be at the top of elements, not at the bottom. 

To solve this problem, we use the order-lg-last order-md-first order-sm-first order-firstclasses:

<div class="container ">
 <div class="row ">
   <div class=" bg-info  col-lg-8  col-md-6 col-sm-12  ">
       left
   </div>
   <div class="bg-success col-lg-4 col-md-6 col-sm-12 order-lg-last order-md-first order-sm-first order-first">
     right
   </div>
</div>
</div>

As a result, on large screens, the right column is displayed on the right, and on small resolutions, it goes first (i.e., at the top).

Note