@@include('../partials/head.html')
@@include('../partials/menu.html',{ 'active': 'flex-grid' })
@@include('../partials/header.html')
Grids Flex Grid Box...
Grid Layout

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px)
--- | --- | --- | --- | ---
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints
Max container width | None (auto) | 750px | 970px | 1170px
Class prefix | `.col-xs-` | `.col-sm-` | `.col-md-` | `.col-lg-`
# of columns | 12
Max column width | Auto | 60px | 78px | 95px
Gutter width | - Overridden in `variables.scss`: 15px (7.5px on each side of a column) - Original Bootstrap default: 30px (15px on each side of a column)
Nestable | Yes
Offsets | Yes
Column ordering | Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any `.col-md-` class to an element will not only affect its styling on medium devices but also on large devices if a `.col-lg-` class is not present.

@@include('../partials/js.html')