Add alternative mobile layouts

See the [updated test page](http://sassmeister.com/gist/7986076).

## What?

Use `l-row--layout-m` to activate flex box on mobile:
- Items fill half the width of their container
- Break the flow and have an item fill the whole width of its container with `l-row__item--break-m`


## How?

![screen shot 2014-02-25 at 10 08 51](https://f.cloud.github.com/assets/85783/2256297/e91aca40-9e04-11e3-8623-186dad69ed4e.PNG)

```html
    <div class="l-row l-row--items-4 l-row--layout-m">
        <div class="l-row__item">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
        <div class="l-row__item">4</div>
    </div>
```

====

![screen shot 2014-02-25 at 10 08 57](https://f.cloud.github.com/assets/85783/2256301/ff34ef18-9e04-11e3-99d1-13980af7de06.PNG)

```html
    <div class="l-row l-row--items-4 l-row--layout-m">
        <div class="l-row__item l-row__item--break-m">1</div>
        <div class="l-row__item">2</div>
        <div class="l-row__item">3</div>
    </div>
```

### Browser support:

Mobile layout variations should degrade gracefully into a vertical list*

- iOS 7+ (-webkit prefix needed)
- Chrome
- IE 11+
- Firefox 28+ (supports flex-wrap: wrap)

\* Firefox < 28 treats mobile layouts as if it were horizontal lists (instead of breaking the items on multiple rows). Why is it fine? Because it will only affect users who don't update their Firefox app on Android. Also, Firefox < 28 desktop users who view the site at mobile breakpoint should represent a small portion of our entire user base.

![ ](http://media.giphy.com/media/PPp293NzJ0A5a/giphy.gif)