Mobile-first design

Phone layout first, then media queries for bigger screens.

What is mobile-first design?

Mobile-first design means writing the phone layout as the default, then adding media queries for bigger screens.

.menu { flex-direction: column; }            /* phones */
@media (min-width: 768px) {
  .menu { flex-direction: row; }            /* tablets and up */
}

Level: Journeyman · More CSS terms at this level

Updated September 27, 2026