Order

Controls the order in which flex or grid items appear within their container, regardless of their source order in the HTML. This is powerful for responsive designs, allowing you to rearrange elements based on screen size without changing the HTML structure. In Tailwind v4, order utilities have improved integration with other layout systems and better accessibility considerations.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="flex">
  <div class="order-3 p-4 bg-blue-300">First in HTML, third visually</div>
  <div class="order-1 p-4 bg-blue-100">Second in HTML, first visually</div>
  <div class="order-2 p-4 bg-blue-200">Third in HTML, second visually</div>
</div>

Examples

Basic ordering of flex items regardless of source order

<div class="flex">
  <div class="order-3 p-4 bg-blue-300">First in HTML, third visually</div>
  <div class="order-1 p-4 bg-blue-100">Second in HTML, first visually</div>
  <div class="order-2 p-4 bg-blue-200">Third in HTML, second visually</div>
</div>

Edit in playground

Responsive ordering that changes based on screen size

<!-- Responsive reordering -->
<div class="flex flex-col sm:flex-row">
  <!-- On mobile: 1st, On desktop: 2nd -->
  <div class="order-1 sm:order-2 p-4 bg-green-100 sm:w-1/3">
    <h2 class="font-bold">Sidebar</h2>
    <p>On mobile, I appear first. On desktop, I move to the right.</p>
  </div>
  
  <!-- On mobile: 2nd, On desktop: 1st -->
  <div class="order-2 sm:order-1 p-4 bg-blue-100 sm:w-2/3">
    <h2 class="font-bold">Main Content</h2>
    <p>On mobile, I appear second. On desktop, I move to the left.</p>
  </div>
</div>

Edit in playground

Card with complex responsive reordering of elements

<!-- Card with responsive element reordering -->
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
  <!-- Image - top on mobile, left on desktop -->
  <div class="order-1 md:order-1 md:w-1/3 h-48 md:h-auto bg-blue-300 flex items-center justify-center">
    <span class="text-white font-bold">Image</span>
  </div>
  
  <div class="flex flex-col md:flex-row">
    <!-- Title - first in content on all screens -->
    <div class="order-1 p-4 md:w-2/3">
      <h2 class="text-xl font-bold">Card Title</h2>
      <p class="mt-2 text-gray-600">Card description that explains more about the item.</p>
      
      <!-- Action buttons - last on mobile, moves up on desktop -->
      <div class="order-3 md:order-2 mt-4 flex space-x-2">
        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Action</button>
        <button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">Secondary</button>
      </div>
      
      <!-- Metadata - middle on mobile, last on desktop -->
      <div class="order-2 md:order-3 mt-4 pt-4 border-t text-sm text-gray-500">
        <p>Created: April 3, 2025</p>
        <p>Category: Example</p>
      </div>
    </div>
  </div>
</div>

Edit in playground

Semantic HTML order with visual reordering for a hero section

<!-- Hero section with reversed source order for better semantics -->
<section class="bg-gray-100 py-16">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center">
      <!-- Content - semantically first in HTML, visually second on desktop -->
      <div class="w-full lg:w-1/2 order-2 lg:order-1 mt-8 lg:mt-0">
        <h1 class="text-3xl md:text-4xl font-bold mb-4">Better HTML Structure with Order</h1>
        <p class="text-lg text-gray-700 mb-6">By using the order utility, we can put the most important content first in the HTML (better for SEO and screen readers) while visually displaying it where it makes sense in the design.</p>
        <button class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Get Started</button>
      </div>
      
      <!-- Image - semantically second in HTML, visually first on desktop -->
      <div class="w-full lg:w-1/2 order-1 lg:order-2 flex justify-center">
        <div class="w-full max-w-md h-64 bg-blue-200 rounded-lg flex items-center justify-center">
          <span class="text-blue-800 font-bold">Hero Image</span>
        </div>
      </div>
    </div>
  </div>
</section>

Edit in playground

Live Preview

Try the Order utility with different values

Open Interactive Playground

Variants

Numeric values (1-12) set the order position, first is equivalent to order: -9999, last is equivalent to order: 9999, none resets to the default order: 0

123456789101112firstlastnone