Order in CSS
From the CSS Flexbox cheat sheet · Flex Items · verified Jul 2026
Order
Change the visual order of flex items without modifying the HTML structure
css
.item {
order: 0; /* default order */
order: -1; /* move to start */
order: 1; /* move to end */
order: 999; /* move to very end */
}html
<div class="container">
<div class="item order-3">First in HTML</div>
<div class="item order-1">Second in HTML</div>
<div class="item order-2">Third in HTML</div>
</div>🎨 Order
HTML 1st
HTML 2nd
HTML 3rd
🔄 Changes visual order
💡 Doesn't affect HTML
⚠️ Affects tab order