.order-first
|
.order-last
|
.order-0
|
.order-1
|
.order-2
|
.order-3
|
.order-4
|
.order-5
|
.order-6
|
.order-7
|
.order-8
|
.order-9
|
.order-10
|
.order-11
|
.order-12
|
Class: .order-last
<div class="flex bg-gray-light">
<div class="white bg-blue p-2 m-1 order-last">block 1 (order-last)</div>
<div class="white bg-blue p-2 m-1">block 2</div>
<div class="white bg-blue p-2 m-1">block 3</div>
<div class="white bg-blue p-2 m-1">block 4</div>
</div>Class: .order-2
<div class="flex bg-gray-light">
<div class="white bg-blue p-2 m-1 order-3">block 1</div>
<div class="white bg-blue p-2 m-1 order-1">block 2</div>
<div class="white bg-blue p-2 m-1 order-4">block 3</div>
<div class="white bg-blue p-2 m-1 order-2">block 4</div>
</div>Shorthand Guide .{size}-order-{index}
.sm-order-first
|
.md-order-first
|
.lg-order-first
|
.xl-order-first
|
.sm-order-last
|
.md-order-last
|
.lg-order-last
|
.xl-order-last
|
.sm-order-0
|
.md-order-0
|
.lg-order-0
|
.xl-order-0
|
.sm-order-1
|
.md-order-1
|
.lg-order-1
|
.xl-order-1
|
.sm-order-2
|
.md-order-2
|
.lg-order-2
|
.xl-order-2
|
.sm-order-3
|
.md-order-3
|
.lg-order-3
|
.xl-order-3
|
.sm-order-4
|
.md-order-4
|
.lg-order-4
|
.xl-order-4
|
.sm-order-5
|
.md-order-5
|
.lg-order-5
|
.xl-order-5
|
.sm-order-6
|
.md-order-6
|
.lg-order-6
|
.xl-order-6
|
.sm-order-7
|
.md-order-7
|
.lg-order-7
|
.xl-order-7
|
.sm-order-8
|
.md-order-8
|
.lg-order-8
|
.xl-order-8
|
.sm-order-9
|
.md-order-9
|
.lg-order-9
|
.xl-order-9
|
.sm-order-10
|
.md-order-10
|
.lg-order-10
|
.xl-order-10
|
.sm-order-11
|
.md-order-11
|
.lg-order-11
|
.xl-order-11
|
.sm-order-12
|
.md-order-12
|
.lg-order-12
|
.xl-order-12
|