> For the complete documentation index, see [llms.txt](https://flexbox.gitbook.io/foundation-101/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flexbox.gitbook.io/foundation-101/design/mobile-first.md).

# Mobile first

## Responsive design in 3 seconds

![](/files/-M3ujfGqtJeSu2-aaB3Z)

[*The responsive snake on reddit*](https://www.reddit.com/r/ProgrammerHumor/comments/5jmdoo/if_this_snake_was_responsive_how_would_it_behave/)

### Responsive Design

![](/files/-M3ujfGsmrqSoRQjQCf_)

### Scaling Design

![](/files/-M3ujfGuGRYImTblykoV)

## Mobile first approach

A little Explanation of the mobile first, always start by the `.small-*` CSS class when you are coding the page.

```markup
<div class="row">  
  <div class="small-12 medium-4 colunms"></div>  
  <div class="small-12 medium-4 colunms"></div>  
  <div class="small-12 medium-4 colunms"></div>  
</div>
```

**Protip:** There are 2 grid system in foundation. For the begining [use the classic one](http://foundation.zurb.com/sites/docs/grid.html) to get support for the largest number of old devices.

*Challenges:*

* [ ] Use the grid with `.callout`classes to reproduce the **Responsive Design picure**
* [ ] Use the grid with `.callout`classes to reproduce the **Scale picure**