❮ Previous Next ❯

Ordering Items

  • Change visual order of flex items easily.

  • Why Ordering Flex Items Matters

    In real UI development:

    • HTML order is written for logic and accessibility

    • Visual order may need to change for design and responsiveness

    Examples:

    • Sidebar moves below content on mobile

    • CTA button appears first visually

    • Image appears before text on desktop, after on mobile

    Flexbox allows you to reorder items visually without touching HTML.

    In Tailwind CSS, this is done using order utilities.

    What Is Flex Item Ordering ?

    Flex item ordering controls the visual sequence of items inside a flex container.

    Important rule:

    Ordering changes only the visual order, not the DOM order.

    This is critical for:

    • Accessibility

    • Screen readers

    • SEO

    • Keyboard navigation

    Default Order Behavior

    By default:

    • All flex items have order: 0

    • Items appear in the same order as HTML

Default Flex Item Order

By default, all flex items have order:0, so they appear in the same order as written in HTML. 

<div class="flex gap-4">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>

  • Visual order:

    A → B → C

    Order Utilities in Tailwind

    Order Utility Syntax

    order-{value}

    Tailwind provides predefined order values.

    Common Order Utilities

    ClassCSS Applied
    order-1order: 1
    order-2order: 2
    order-3order: 3
    order-firstorder: -9999
    order-lastorder: 9999
    order-noneorder: 0

    Lower order values appear earlier.

Flex Item Ordering

order-* utilities change the visual order of flex items without changing the HTML structure. 

<div class="flex gap-4">
  <div class="order-2 bg-blue-200 p-4">Item 1</div>
  <div class="order-1 bg-green-200 p-4">Item 2</div>
  <div class="order-3 bg-red-200 p-4">Item 3</div>
</div>

  • Visual order:

    Item 2 → Item 1 → Item 3

    HTML order remains unchanged.

    Using order-first and order-last

Order First Utility

order-first places the element at the beginning of the flex container. 

<div class="flex gap-4">
  <div class="order-first bg-yellow-200 p-4">First</div>
  <div class="bg-gray-200 p-4">Middle</div>
  <div class="bg-gray-200 p-4">Last</div>
</div>

  • Result:

    • First element appears visually first, regardless of HTML position

Order Last Utility

order-last moves the element to the end of the flex container. 

<div class="flex gap-4">
  <div class="bg-gray-200 p-4">Item</div>
  <div class="order-last bg-red-200 p-4">Action</div>
</div>

  • Used commonly for:

    • CTA buttons

    • Actions aligned at end

    Responsive Ordering 

    Ordering becomes extremely powerful when combined with responsive prefixes.

Responsive Flex Ordering

order-* changes item order on different screen sizes using responsive prefixes. 

<div class="flex flex-col md:flex-row gap-4">
  <div class="order-2 md:order-1 bg-blue-200 p-4">
    Main Content
  </div>
  <div class="order-1 md:order-2 bg-green-200 p-4">
    Sidebar
  </div>
</div>

  • Meaning:

    • Mobile → Sidebar first

    • Desktop → Main content first

    This is a real-world responsive pattern.

    Ordering with Flex Direction

    Ordering works independently of direction.

    Whether:

    • flex-row

    • flex-col

    • flex-wrap

    The order logic remains the same:

    Lower order → earlier in visual flow

    Real-World Use Cases

Real-World Flex Ordering

order-* utilities change the visual position of items in cards and responsive layouts. 

<!-- Card with Action Button -->
<div class="flex flex-col gap-4">
  <p>Description</p>
  <button class="order-last bg-blue-600 text-white py-2">
    Buy Now
  </button>
</div>

<!-- Hero Section Layout -->
<div class="flex flex-col md:flex-row gap-6">
  <img class="order-2 md:order-1" src="hero.png" />
  <div class="order-1 md:order-2">
    Text content
  </div>
</div>

  • Accessibility Considerations 

    Because ordering does not change DOM order:

    • Screen readers read original HTML order

    • Tab navigation follows HTML order

    Best practice:

    • Write HTML in logical reading order

    • Use order utilities only for visual adjustments

    Never use order to:

    • Fix bad HTML structure

    • Reorder form fields semantically

      Common Mistakes

      • Using order to fix layout instead of structure

      • Overusing order-first and order-last

      • Forgetting responsive order resets

      • Breaking accessibility unintentionally

      • Mixing too many order values

      Ordering should be minimal and intentional.

      Best Practices for Ordering Flex Items

      • Keep HTML order logical

      • Use order utilities mainly for responsiveness

      • Prefer order-first / order-last for simple cases

      • Reset order at larger breakpoints when needed

      • Test keyboard navigation

    ❮ Previous Next ❯