12 Column Flex Grid with Nested Grids

Overall, col boxes are set to "justify-content:space-between", but nested grids are "justify-content:center" to allow col boxes that don't fill out a full row to center under the previous rows (see Nested Grid examples below). For specific situations, "justify-content:space-between" or other options may be better.

.flex-wrapper:max-width 69.5rem (~1100px)
Desktop >= 961; Tablet 601-960; Mobile <= 600

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-4 m-12
Col 2
Col 3
Col 4
Col 5
Col 6
Col 2: 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: col d-3 t-4 m-12