.col.col-xl-3 {background:red} .col.col-xl-9 {background:black} 
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col col-xl-3 order-xl-3 col-lg-6 order-lg-3 col-md-6 col-sm-12 col-12">///</div> <div class="col col-xl-9 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">///</div> </div> </div>

Despite the fact that 3 is the first, and 9 is the second, 3 is not displayed on the left, but on the right. How to fix?

Ps: Expand the snippet to see an example.

    1 answer 1

    So you set the first column to order-xl-3 , and the second order-xl-2 . If you want to swap:

     <div class="col col-xl-3 order-xl-1 col-lg-6 order-lg-3 col-md-6 col-sm-12 col-12">///</div> <div class="col col-xl-9 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">///</div>