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:


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 a margin around each flex child. It also adds a margin to the layout container itself.
layout-fill forces the layout element to fill its parent container.


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.