Tailwind Flexbox lesson
Change the visual order
order-* changes where a flex item appears among its
siblings. The HTML source stays in the same order, which is important
for reading and keyboard navigation.
Utilities
| Class | What it does |
|---|---|
order-first |
Places the item before every normal ordered item. |
order-last |
Places the item after every normal ordered item. |
order-none |
Returns the item to the default order of zero. |
order-1 |
Sets an explicit order value of one. |
Try it
Use order sparingly. It can make a visual adjustment at a breakpoint, but the source order should still make sense without CSS.
<section class="flex flex-col md:flex-row">
<main class="order-1">Article</main>
<aside class="order-2 md:order-none">Related links</aside>
</section>