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=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.