Order - Starting Point
Change the visual order of flex items without changing the HTML structure. Perfect for responsive layouts!
Default Order (order: 0)
Items appear in their natural HTML order
Item 1
Item 2
Item 3
Item 4
Move Last Item to First
Use order: -1 to move an item to the beginning
Item 1
Item 2
Item 3
Item 4 (move to first)
Move First Item to Last
Use order: 1 to move an item to the end
Item 1 (move to last)
Item 2
Item 3
Item 4
Complex Reordering
Use different order values to completely rearrange items
Item 1 (order: 3)
Item 2 (order: 1)
Item 3 (order: 4)
Item 4 (order: 2)
🎯 Practical Example: Responsive Layout
Great for changing layout order on mobile vs desktop:
Desktop Layout (default order):
Main Content
Ads
Mobile Layout (reordered):
Main Content
Ads
⚠️ Accessibility Important!
Order only changes visual order, not HTML order. Screen readers still read the original HTML order. Use carefully!
- Don't reorder content that changes meaning
- Test with screen readers
- Consider using different HTML structure instead
Instructions
Add display: flex to containers, then add order values to move items around!
Key Points:
- Default order is 0 for all flex items
- Lower numbers come first, higher numbers come last
- Can use negative numbers (order: -1, -2, etc.)
- Only affects visual order, not HTML structure
- Perfect for responsive design