12 Column Flexbox Grid with Nested Columns
.flex-wrapper: max-width 75rem; makes content ~1170px wide (15px padding left and right)
Desktop >= 961; Tablet 750-960; Mobile <= 749
Col 1: col d-12 t-12 m-12
Col 1: col d-6 t-6 m-12
Col 2
Col 1: col d-6 t-6 m-6
Col 2
Equal Columns
col 1: col d-4 t-4 m-12
Col 2
Col 3
Col 1: col d-3 t-6 m-12
Col 2
Col 3
Col 4
Col 1: col d-2 t-4 m-12
Col 2
Col 3
Col 4
Col 5
Col 6
Col 1: col d-1 t-3 m-4
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Col 8
Col 9
Col 10
Col 11
Col 12
Page Layouts
Col 1: col d-3 t-4 m-12
Col 2: col d-9 t-8 m-12
Col 1: col d-3 t-4 m-12
Col 2: col d-6 t-5 m-12
Col 3: col d-3 t-3 m-12 color-pad
Col 1: col d-4 t-4 m-12
Col 2: col d-8 t-8 m-12
Col 1: col d-5 t-5 m-12
Col 2: col d-7 t-7 m-12
Semantically Better Page Layouts
Col 1: col d-9 t-8 m-12
Col 2: col d-3 t-4 m-12
Col 2: col d-6 t-5 m-12
Col 3: col d-3 t-3 m-12 color-pad
Col 1: col d-3 t-4 m-12
Nested Grid - 3 column (desktop)
col d-9 t-8 m-12
col 1: col d-4 t-6 m-12
Col 2
Col 3
Col 4
Col 5
Col 6
Col 2 (sidebar):
col d-3 t-4 m-12
Nested Grid - 4 column (desktop)
col d-9 t-8 m-12
col 1: col d-3 t-4 m-12
Col 2
Col 3
Col 4
Col 5
Col 6
Col 2 (sidebar):
col d-3 t-4 m-12