md: targets tablets — everything from 768px wide. Tablets portrait — navigation often unfolds here, sidebars appear, and reading columns widen.

What usually changes here#

  • Hamburger → inline nav
  • Sidebars appear
  • Grids: 2 → 3 columns
  • Tables stop horizontal-scrolling

Example#

html
<div class="flex-col md:flex-row">…</div>

Combining#

Stack with the other screens and with variants: md:hover:bg-blue-600. Order: screen first, then state.

responsive/sm|sm: (640px) · responsive/lg|lg: (1024px) · responsive/breakpoint-strategy|Breakpoint strategy