Tailwind CSS - Order

The Order utilities in Tailwind CSS provide control over the visual order of flex and grid items, independent of their order in the HTML source. This is a fundamental tool for creating responsive and adaptive layouts.

How it Works

The order-* utilities apply the CSS order property to an element. By default, flex and grid items have an order of 0, and they appear in the same order as they are defined in the DOM. By assigning a different order value, you can rearrange them.

Class	CSS Properties
order-1	order: 1;
order-2	order: 2;
…	…
order-12	order: 12;
order-first	order: -9999;
order-last	order: 9999;
order-none	order: 0;

Key Concepts:

Items with lower order values appear first.
order-first uses a very low negative number to ensure the item always comes first.
order-last uses a very high number to ensure the item always comes last.
order-none resets the order to its default behavior (0).

Basic Ordering Example

In this example, the HTML for ‘Item 2’ comes after ‘Item 1’, but the order-first class visually places it at the beginning of the flex container.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Order Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-slate-100">
  <h2 class="text-xl font-bold mb-4">Item Reordering</h2>
  <div class="flex flex-wrap gap-4 text-white font-bold">
    <!-- This item appears second visually -->
    <div class="p-6 rounded-lg bg-blue-500 w-32 text-center">
      Item 1 (DOM Order: 1st)
    </div>
    <!-- This item appears first visually due to order-first -->
    <div class="order-first p-6 rounded-lg bg-violet-500 w-32 text-center">
      Item 2 (DOM Order: 2nd)
    </div>
    <!-- This item appears last visually due to order-last -->
    <div class="order-last p-6 rounded-lg bg-red-500 w-32 text-center">
      Item 3 (DOM Order: 3rd)
    </div>
    <!-- This item's order is unchanged -->
    <div class="p-6 rounded-lg bg-emerald-500 w-32 text-center">
      Item 4 (DOM Order: 4th)
    </div>
  </div>
</body>
</html>

Responsive Ordering: A Practical Use Case

The true power of the order utility shines when combined with responsive prefixes (like sm:, md:, lg:). A common pattern is to have a different content order on mobile versus desktop screens.

In the example below, on small screens, the text content appears first. On medium screens and larger (md:), the image appears first.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Ordering</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 md:p-8">
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
    <!-- Text Content -->
    <div class="order-2 md:order-1">
      <h1 class="text-3xl font-bold text-slate-800">Responsive Product Title</h1>
      <p class="mt-4 text-slate-600">On mobile, this text comes first for quick reading. On desktop, the image appears on the left, which is a more traditional layout.</p>
    </div>

    <!-- Image -->
    <div class="order-1 md:order-2">
      <img src="https://placehold.co/600x400/3b82f6/ffffff" alt="Placeholder Image" class="rounded-lg shadow-lg">
    </div>
  </div>
</body>
</html>

Best Practices and Considerations

Accessibility First: Be mindful that changing the visual order does not change the DOM order. Screen readers and keyboard navigation will still follow the source code order. Ensure that the DOM order provides a logical flow, even if the visual order is different.
Use with Flexbox and Grid: The order utilities only work on elements that are direct children of a flex or grid container.
Keep it Simple: While you can create complex reorderings, it’s often better to keep layouts as simple as possible. For simple reversals, consider using flex-row-reverse or flex-col-reverse instead of manually ordering every item.