### Layout and Containers

Use the `layout` directive on a container element to specify the layout direction for its children: horizontally in a row (`layout="row"`) or vertically in a column (`layout="column"`). Note that `row` is the default layout direction if you specify the `layout` directive without a value.

row | Items arranged horizontally. `max-height = 100%` and `max-width` is the width of the items in the container.
column | Items arranged vertically. `max-width = 100%` and `max-height` is the height of the items in the container.

First item in row
Second item in row
First item in column
Second item in column

Note that `layout` only affects the flow direction for that container's immediate children.

### Layouts and Responsive Breakpoints

As discussed in the Layout Introduction page you can make your layout change depending upon the device view size by using breakpoint alias suffixes.

To make your layout automatically change depending upon the device screen size, use one to the following `layout` APIs to set the layout direction for devices with view widths:

API | Device width when breakpoint overrides default
--- | ---
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

For the demo below, as you shrink your browser window width notice the flow direction changes to `column` for mobile devices (`xs`). And as you expand it will reset to `row` for `gt-sm` view sizes.

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 Options page for more options such as padding, alignments, etc.