Show and Hide with Responsive Display

Combining hidden with display classes (block, flex) and breakpoint prefixes controls visibility across screen sizes. This is the foundation of every responsive navigation.

Mobile-only elements

<button class="block md:hidden p-2 text-gray-600">Menu</button>

Desktop-only elements

<ul class="hidden md:flex gap-6 text-sm font-medium">
  <li><a href="#">Products</a></li>
  <li><a href="#">Pricing</a></li>
</ul>

Responsive table columns

<table class="w-full text-sm">
  <thead><tr>
    <th>Name</th>
    <th class="hidden sm:table-cell">Email</th>
    <th class="hidden lg:table-cell">Department</th>
    <th>Status</th>
  </tr></thead>
</table>

Switching flex direction

<div class="flex flex-col md:flex-row gap-6">
  <img class="w-full md:w-48" src="..." />
  <div class="flex-1">Content</div>
</div>

Changing flex direction via flex-col md:flex-row reflows card layouts between mobile and desktop without separate HTML structures.