Flex Order

To allow you to manually control the order of your elements, Bootstrap provides you with the order-* classes. Using these classes, one can move columns horizontally along their parent row. For instance, perhaps you wanted the Extra Large category to appear before the Large category in certain resolutions. You would simply dynamically apply a specific instance of the order-* class to the appropriate columns. Take this example into consideration:

<div class="container">
     <h1>Our Print Sizes</h1>
     <div class="row">
       <div class="col">Small</div>
       <div class="col">Medium</div>
       <div class="col order-md-2">Large</div>
       <div class="col order-md-1">Extra Large</div>
     </div>
</div>

As with the col-* classes, the ordering classes consist of responsive and non-responsive versions. The non-responsive equivalent of order-*-* is simply order-* (for example, order-1, order-2, order-3, and so on).

It is important to note that the order classes are merely wrappers for the CSS3 order property (the order property simply specifies the order of an element relative to the other elements that share its container). In the case of the responsive order classes, they are simply accompanied by breakpoints. For example, Bootstrap 4 defines order-1 simply as follows:

.order-1 {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}