Use
.order-
classes for controlling the visual order of your content. These classes are responsive, so you can set theorder
by breakpoint (e.g.,.order-1.order-md-2
). Includes support for1
through12
across all five grid tiers.
<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>
There are also responsive
.order-first
and.order-last
classes that change theorder
of an element by applyingorder: -1
andorder: 13
(order: $columns + 1
), respectively. These classes can also be intermixed with the numbered.order-*
classes as needed.
<div class="container"> <div class="row"> <div class="col order-last"> First, but last </div> <div class="col"> Second, but unordered </div> <div class="col order-first"> Third, but first </div> </div> </div>
References
https://getbootstrap.com/docs/4.3/layout/grid/#reordering