Mobile-first Design

Mobile-first means you write the base CSS for small screens, then use min-width media queries to add layout for bigger ones.

/* phones: one column (the default) */
.layout { display: flex; flex-direction: column; gap: 16px; }

/* tablets and up: sidebar next to content */
@media (min-width: 768px) {
  .layout { flex-direction: row; }
  .sidebar { width: 260px; }
}

• Most visitors are on phones, so they get the simplest CSS.
• It is easier to add layout than to undo it.
• It forces you to focus on the most important content.