Resize your browser or load on different devices to test the grid system.
### Example: Equal-width
```js
import { Container, Row, Col } from '.';
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
```
### Example: Stacked to horizontal
```js
import { Container, Row, Col } from '.';
md=1
md=1
md=1
md=1
md=1
md=1
md=1
md=1
md=1
md=1
md=1
md=1
md=8
md=4
md=4
md=4
md=4
md=6
md=6
```
### Example: Mix and match
```js
import { Container, Row, Col } from '.';
xs=12 md=8
xs=6 md=4
xs=6 md=4
xs=6 md=4
xs=6 md=4
xs=6
xs=6
```
### Example: Column wrapping
```js
import { Container, Row, Col } from '.';
xs=9
xs=4
Since 9 + 4 = 13 > 12, this 4-column-wide Col gets wrapped onto a new line as one contiguous unit.
xs=6
Subsequent columns continue along the new line.
```
### Example: Vertical alignment
```js
import { Container, Row, Col } from '.';
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
```
### Example: Horizontal alignment
```js
import { Container, Row, Col } from '.';
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
```
### Example: Direction prop for order and orientation of Row children
```js
import { Container, Row, Col } from '.';
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
1 of 3
2 of 3
3 of 3
```
### Example: Offsetting columns
```js
import { Container, Row, Col } from '.';
md=4
md=4 offset-md=4
md=3 offset-md=3
md=3 offset-md=3
md=6 offset-md=3
```
### Example: Nesting columns
```js
import { Container, Row, Col } from '.';
Level 1: sm=9
Level 2: xs=8 sm=6
Level 2: xs=4 sm=6
```
### Example: Column ordering
```js
import { Container, Row, Col } from '.';
md=9 push-md=3
md=3 pull-md=9
```
### Example: Custom gutter width
```js
import { Container, Row, Col } from '.';
md=8
md=4
md=8
md=4
```
### Example: Column width adapted to content
```js
import { Container, Row, Col } from '.';
Logo (Flexible column)
Menu with x-items
```
### Example: Ordering Cols adapted to content
```js
import { Container, Row, Col } from '.';
First on md, last on xl
First on xl, last on md
```