Controls the order of a flexible item relative to its container.
| Class | Properties |
|---|---|
| flex-order-0 | order: 0; |
| flex-order-1 | order: 1; |
| flex-order-2 | order: 2; |
| flex-order-3 | order: 3; |
| flex-order-4 | order: 4; |
| flex-order-5 | order: 5; |
| flex-order-6 | order: 6; |
Items can be given specific order regardless of their order at the document.
<div class="flex flex-wrap">
<div class="flex-order-2 flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">1</div>
<div class="flex-order-1 flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">2</div>
<div class="flex-order-0 flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">3</div>
</div>
Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:flex-order-1 to use a responsive class.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
<div class="flex flex-wrap">
<div class="md:flex-order-2 flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">1</div>
<div class="md:flex-order-1 flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">2</div>
<div class="md:flex-order-0 flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">3</div>
</div>