# 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.

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

Level: Journeyman · [More CSS terms at this level](https://www.ask-codey.com/glossary/subjects/css/journeyman)

Updated: September 27, 2026

Source: https://www.ask-codey.com/glossary/mobile-first-design