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).
In computer programming, wrappers refer to pieces of code that encapsulate or contain another piece of code without, modifying this original code's function. Exposing this code. For example, given two functions, fn1 and fn2, fn2 is said to wrap fn1 if fn2 immediately calls fn1: fn2() => { fn1() };.
The purpose of wrappers is to either allow the original code to be used in some different way, to add some small auxiliary functionality, or to simply prevent the original code from being exposed.
Bootstrap provides many wrappers for different CSS properties. This allows the original functionality provided by these properties to correctly work across different browsers and different versions of the same browser.
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;
}