I'm above on mobile, and to the left on larger devices.
I'm below on mobile, and to the right on larger devices.

See the Layout Container page for a basic explanation of layout attributes.
To make your layout change 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 devices less than 600px wide (phones).
layout-gt-sm | Sets the layout on devices greater than 600px wide (bigger than phones).
layout-md | Sets the layout on devices between 600px and 960px wide (tablets in portrait).
layout-gt-md | Sets the layout on devices greater than 960px wide (bigger than tablets in portrait).
layout-lg | Sets the layout on devices between 960 and 1200px wide (tablets in landscape).
layout-gt-lg | Sets the layout on devices greater than 1200px wide (computers and large screens).

I'm on the left, and there's an empty area around me.
I'm on the right, and there's an empty area around me.

`layout-margin` adds margin around each `flex` child. It also adds a margin to the layout container itself.
`layout-padding` adds padding inside each `flex` child. It also adds padding to the layout container itself.
`layout-fill` forces the layout element to fill its parent container.

[flex=33]
[flex=66]
[flex=66]
[flex=33]

`layout-wrap` allows `flex` children to wrap within the container if the elements use more than 100%.

I flex to one-third of the space on mobile, and two-thirds on other devices.
I flex to two-thirds of the space on mobile, and one-third on other devices.

See the Layout Grid page for a basic explanation of flex and offset attributes.

flex | Sets flex.
flex-sm | Sets flex on devices less than 600px wide.
flex-gt-sm | Sets flex on devices greater than 600px wide.
flex-md | Sets flex on devices between 600px and 960px wide..
flex-gt-md | Sets flex on devices greater than 960px wide.
flex-lg | Sets flex on devices between 960px and 1200px.
flex-gt-lg | Sets flex on devices greater than 1200px wide.

I'm hidden on mobile and shown on larger devices. I'm shown on mobile and hidden on larger devices.

hide | `display: none`
hide-sm | `display: none` on devices less than 600px wide.
hide-gt-sm | `display: none` on devices greater than 600px wide.
hide-md | `display: none` on devices between 600px and 960px wide.
hide-gt-md | `display: none` on devices greater than 960px wide.
hide-lg | `display: none` on devices between 960px and 1200px.
hide-gt-lg | `display: none` on devices greater than 1200px wide.
show | Negates hide.
show-sm | Negates hide on devices less than 600px wide.
show-gt-sm | Negates hide on devices greater than 600px wide.
show-md | Negates hide on devices between 600px and 960px wide..
show-gt-md | Negates hide on devices greater than 960px wide.
show-lg | Negates hide on devices between 960px and 1200px.
show-gt-lg | Negates hide on devices greater than 1200px wide.