From the ground up the layout system is built around being responsive to viewport size.
Out of the box it comes with useful and customizable breakpoints, which can be easily reused.
The layout
attribute used with "horizontal" or "vertical" values define arrangement on all device sizes.
If you wish to define a layout depending upon the device size, there are
other layout
attributes available:
layout
sets the default layout on all devices.
layout-sm
sets the layout on device >=600px wide.
layout-md
sets the layout on devices >=960px wide.
layout-lg
sets the layout on devices >=1200px wide.
layout-padding
adds padding between this layout's children with
the flex
attribute.
layout-fill
forces the layout element to fill its parent container.
block | display: block |
block-sm | display: block when the small media query is active. |
block-md | display: block when the medium media query is active. |
block-lg | display: block when the large media query is active. |
inline-block | display: inline-block |
inline-block-sm | display: inline-block when the small media query is active. |
inline-block-md | display: inline-block when the medium media query is active. |
inline-block-lg | display: inline-block when the large media query is active. |
hide | display: none |
hide-sm | display: none when the small media query is active. |
hide-md | display: none when the medium media query is active. |
hide-lg | display: none when the large media query is active. |