F flexr.dev

Layout Recipe

Reversing Item Order in Tailwind CSS Grid

Searching for tailwind grid reverse lands you in a different toolbox than Flexbox. There is no grid-col-reverse class — to reverse grid column order you reach for the order-* utilities on individual grid items, the packing controls in grid-flow-*, or an rtl writing direction. The flex-col-reverse utility only works inside a flex container, so it cannot help here.

The playground below is pre-configured in Grid mode — select any item and change its order to see the sequence flip, then copy the Tailwind or vanilla CSS.

Live Preview

Current Layout:

Controlling Grid Sequence with Tailwind Order Utilities

Inside a CSS Grid, visual position is decoupled from DOM position by the order property. Tailwind exposes it as order-first (a very negative order), order-last (a very positive one), and the numeric steps order-1 through order-12. Apply them to any grid item and the browser re-sequences the cells without you re-writing the markup — the DOM, and therefore tab and screen-reader order, stays exactly as authored. 

<!-- order-last sends the first DOM child to the end, flipping the pair -->
<div class="grid grid-cols-2 gap-4">
  <div class="order-last rounded-lg bg-zinc-800 p-4">Item 1</div>
  <div class="rounded-lg bg-zinc-800 p-4">Item 2</div>
</div>

Because order utilities are just classes, they take responsive prefixes. This is the cleanest way to reverse a layout on one breakpoint only — pair a base order-last with an md:order-first so a sidebar sits below the content on mobile but leads on desktop. Adding grid-flow-row-dense lets the grid backfill any gaps left behind when items change size or span, keeping the tracks tightly packed. 

<!-- Reverse only on mobile: sidebar drops below on small screens,
     then order-first pulls it back to the front at the md breakpoint -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 grid-flow-row-dense">
  <aside class="order-last md:order-first rounded-lg bg-zinc-800 p-4">Sidebar</aside>
  <main class="md:col-span-2 rounded-lg bg-zinc-800 p-4">Main content</main>
</div>

To mirror an entire grid at once — reversing every column in a single stroke — set the writing direction to right-to-left with dir="rtl". Combined with a fixed grid-cols-3 track definition, the columns render in reverse visual order while the source stays untouched. Tailwind also ships rtl: and ltr: variants so you can scope individual utilities to the active direction. 

<!-- dir="rtl" mirrors the whole grid, reversing every column at once -->
<div dir="rtl" class="grid grid-cols-3 gap-4">
  <div class="rounded-lg bg-zinc-800 p-4">1</div>
  <div class="rounded-lg bg-zinc-800 p-4">2</div>
  <div class="rounded-lg bg-zinc-800 p-4">3</div>
</div>

Popular Layout Guides