F flexr.dev

Layout Recipe

Reverse Stacking Order with Tailwind flex-col-reverse

'flex-col-reverse' stacks children bottom-to-top: the first element in your DOM renders at the bottom of the container. Chat threads and activity feeds use this so the newest message stays visually anchored at the bottom while you append to the end of the list — and as a bonus, the browser keeps the scroll position pinned there. Note that only the visual order flips; screen readers and tab order still follow the DOM.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.

Live Preview

Current Layout:

flex-col-reverse flips the stack

flex flex-col-reverse stacks children bottom to top: the first element in your markup renders at the bottom of the container. It is the go-to for chat threads and activity feeds, where you append the newest message to the end of the list but want it shown at the bottom.

Tailwind 
<div class="flex flex-col-reverse gap-2 h-96 overflow-y-auto">
  <div>Older message</div>
  <div>Newer message shown at the bottom</div>
</div>
Vanilla CSS 
.feed {
  display: flex;
  flex-direction: column-reverse;
}

Why the scroll stays pinned to the bottom

A bonus of flex-col-reverse: the browser anchors the scroll position to the bottom. Append a new message and the view stays pinned to the latest one, with no scroll-to-bottom JavaScript — exactly the behaviour a chat window wants.

Flexbox reversal vs CSS Grid reversal

This guide covers Flexbox column structures — flipping the stacking order inside a flex container. Reversing a CSS Grid is a different mechanism built on order-* utilities, grid-flow-*, and an rtl direction rather than flex-col-reverse.

If you are trying to reverse grid rows or columns, head to Reversing Item Order in Tailwind CSS Grid instead.

Accessibility: only the visuals flip

flex-col-reverse changes the visual order, not the DOM order — screen readers and keyboard tab order still follow the source. Keep your markup in logical reading order and let the utility handle presentation, so assistive tech announces messages sensibly.

Frequently asked questions

How do I reverse column order in Tailwind?
Use flex flex-col-reverse on the container; children stack bottom to top, so the first element in the DOM appears at the bottom.
How do I keep a chat scrolled to the newest message?
flex-col-reverse anchors the scroll to the bottom, so appending a new message keeps the latest one in view without extra JavaScript.
Does flex-col-reverse change tab order?
No. It only flips the visual order; the DOM order, tab order, and screen-reader order stay as written.

Popular Layout Guides