Visit Pixel Rocket

Order - Finish

See how order changes the visual arrangement without touching the HTML. Perfect for responsive layouts and accessibility considerations.

See Start Next: Gaps

Default Order (HTML source order)

Item 1
Item 2
Item 3
Item 4

Items appear in their HTML source order (all have order: 0)

Reverse Order

Item 1 (order: 4)
Item 2 (order: 3)
Item 3 (order: 2)
Item 4 (order: 1)

Items are visually reversed using order values

Move One Item

Item 1
Item 2
Item 3
Item 4 (order: -1)

Item 4 moves to the front with order: -1

Mixed Order Values

Item 1 (order: 3)
Item 2 (order: 0)
Item 3 (order: 1)
Item 4 (order: 2)

Items are sorted by order value: 0, 1, 2, 3

Responsive Navigation Example

Logo
Home
About
Services
Contact

On mobile, Contact button could move to the front using order

⚠️ Accessibility Consideration

Important: Screen Readers Follow HTML Order

Visual order changes with CSS order property, but screen readers and keyboard navigation still follow the HTML source order.

Best Practice: Only use order for minor layout adjustments, not complete content reorganization.

Always consider accessibility when reordering content

Key Takeaways

  • order changes visual arrangement without touching HTML structure
  • Order Values:
    • Default is 0 for all items
    • Negative values (e.g., -1) move items earlier
    • Positive values (e.g., 1, 2, 3) move items later
    • Items with same order follow HTML source order
  • Common Use Cases:
    • Moving call-to-action buttons on mobile
    • Reordering navigation elements
    • Adjusting sidebar positions
  • Accessibility Warning: Screen readers follow HTML order, not visual order
  • Use sparingly for minor adjustments, not complete content reorganization