Layout: Switcher

The switcher layout switches a container with Flexbox between a horizontal and a vertical direction at a given, container-based breakpoint. No viewport media queries required, so it will nest nicely inside of other containers.

It's a good choice for situations where each child item should be considered equal.

Stuff 1
Stuff 2
Stuff 3

There are certain caveats to note when customising the default switcher layout:

A consideration for Internet Explorer 11

There must be no padding on the switcher child items themselves, otherwise the layout will break. To space content away from the edges, use nested elements with margin or padding.