Order
Utilities for controlling visual order of items.
Quick reference
Section titled “Quick reference”| Class | Styles |
|---|---|
af-order-first | order: -1 |
af-order-default | order: 0 |
af-order-{1..6} | order: <n> |
af-order-last | order: 9999 |
Examples
Section titled “Examples”Reorder
A (order 2)
B (order 1)
C (order 3)
<div class="af-flex" style="gap: 0.5rem;">
<div class="af-badge af-order-2">A (order 2)</div>
<div class="af-badge af-order-1">B (order 1)</div>
<div class="af-badge af-order-3">C (order 3)</div>
</div>Responsive variants
Section titled “Responsive variants”All order utilities support responsive variants using the @{bp} suffix.
See Responsive Suffix for syntax and breakpoints.