Alternating media/copy rows.

The pattern#

html
<section class="grid items-center gap-12 py-16 lg:grid-cols-2">
  <div class="lg:order-2">image</div>
  <div>copy</div>
</section>

Responsive behavior#

Every pattern here is breakpoint-agnostic at its core — add sm:/md:/lg: prefixes to the grid/flex containers to tune when it collapses. Because the primitives are utilities, responsiveness is a prefix, never a rewrite.

When to use#

  • Product tours
  • Feature pages

patterns/index|All patterns · utilities/grid/grid-template-columns|Grid · utilities/flexbox/flex-direction|Flexbox