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.

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

• When the flex container is less than 600px wide, child items are arranged vertically. Otherwise, child items are arranged horizontally. This container breakpoint may well need overriding depending on the use case.
• The number of columns in a row is two. This can be overridden by adjusting the min-width percentage.

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.