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 Container Elements page for a basic explanation of layout directives.
To make your layout change depending upon the device screen size, there are other `layout` directives available:

API | Activates when device
--- | ---
layout | Sets default layout direction unless overridden by another breakpoint.
layout-xs | width < 600px
layout-gt-xs | width >= 600px
layout-sm | 600px <= width < 960px
layout-gt-sm | width >= 960px
layout-md | 960px <= width < 1280px
layout-gt-md | width >= 1280px
layout-lg | 1280px <= width < 1920px
layout-gt-lg | width >= 1920px
layout-xl | width >= 1920px

### Layout Margin, Padding, Wrap and Fill

Parent layout and this element have margins.
Parent layout and this element have padding.
Parent layout is set to fill available space.
I am using all three at once.

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

Here is a non-trivial group of `flex` elements using `layout-wrap`

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

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

### Show & Hide

Use the `show` `hide` APIs to responsively show or hide elements. While these work similar to `ng-show` and `ng-hide`, these Angular Material Layout directives are mediaQuery-aware.

Only show on gt-sm devices.
Shown on small and medium.
Hidden on gt-sm devices.
Shown on small and medium size devices.
Hidden on gt-md devices.
Shown on medium size devices only.
Shown on devices larger than 1200px wide only.

hide (display: none) | show (negates hide) | Activates when:
--- | --- | ---
hide-xs | show-xs | width < 600px
hide-gt-xs | show-gt-xs | width >= 600px
hide-sm | show-sm | 600px <= width < 960px
hide-gt-sm | show-gt-sm | width >= 960px
hide-md | show-md | 960px <= width < 1280px
hide-gt-md | show-gt-md | width >= 1280px
hide-lg | show-lg | 1280px <= width < 1920px
hide-gt-lg | show-gt-lg | width >= 1920px
hide-xl | show-xl | width >= 1920px