Material design flex grid system fluid

A layout child's flex attribute can be given an integer value from 0-100. The element will stretch to the percentage of available space matching the value.

The flex attribute value is restricted to 33, 66, and multiples of five. For example: flex="5", flex="20", "flex="33", flex="50", flex="66", flex="75", ....

[flex="33"]
[flex="55"]
[flex]
[flex="60"]
[flex="40"]
[flex="20"]
[flex="30"]
[flex="50"]
Material design flex grid system

To customize the size and position of elements in a layout, use the flex, offset, and flex-order attributes.

[flex]
[flex]
[flex hides on small]
Bootstrap 12 Grid setup
col-md-12
col-md-11
col-md-1
col-md-10
col-md-2
col-md-9
col-md-3
col-md-8
col-md-4
col-md-7
col-md-5
col-md-6
col-md-6
col-md-5
col-md-7
col-md-4
col-md-8
col-md-3
col-md-9
col-md-2
col-md-10
col-md-1
col-md-11
col-md-2
col-md-3
col-md-4
col-md-2
col-md-1