Tailwind CSS Academy · Lesson

Responsive Layouts With Flex and Grid

Switch between column and row layouts at different breakpoints using responsive prefixes like md:flex-row and lg:grid-cols-3.

Responsive Layout Fundamentals

The two most important layout techniques in Tailwind — Flexbox and Grid — both compose naturally with responsive breakpoint prefixes. The core idea is simple: define the mobile layout first with unprefixed utilities, then add breakpoint-prefixed overrides to change the layout at larger screens. Understanding how to switch between flex and grid, and how to change their key properties at breakpoints, gives you the tools to build any responsive design.

<!-- Core pattern: column on mobile, row on desktop -->
<div class="flex flex-col lg:flex-row gap-6">
  <aside class="w-full lg:w-64 shrink-0">Sidebar</aside>
  <main class="flex-1">Main content</main>
</div>

flex-col to flex-row at Breakpoints

The most frequently used responsive flex pattern is toggling direction. flex flex-col md:flex-row stacks children vertically on phones and arranges them horizontally on tablets. Apply this to hero sections (text above image on mobile, side-by-side on desktop), feature rows, and comparison cards. The children maintain their natural height in column mode and stretch to match height in row mode.

<!-- Hero: stacked on mobile, side by side on desktop -->
<div class="flex flex-col md:flex-row items-center gap-8 px-6 py-12">
  <!-- Text block -->
  <div class="flex-1 text-center md:text-left">
    <h1 class="text-3xl md:text-4xl font-bold mb-4">Build Better Apps</h1>
    <p class="text-gray-600 mb-6">Everything you need to ship fast.</p>
    <button class="bg-blue-600 text-white px-6 py-3 rounded-lg">Get Started</button>
  </div>
  <!-- Image -->
  <div class="flex-1 w-full md:w-auto">
    <div class="aspect-video bg-gradient-to-br from-blue-400 to-indigo-600 rounded-2xl"></div>
  </div>
</div>

All lessons in this course

← Back to Tailwind CSS Academy