Responsive Grid and Container widths

Class Properties
kmd-content-full width: 100%;
kmd-content-lg max-width: 1180px;
kmd-content-md max-width: 768px;
kmd-content-sm max-width: 680px;
kmd-content-xs max-width: 480px;
kmd-content-xxs max-width: 320px;
kmd-content-full
kmd-content-lg
kmd-content-md
kmd-content-sm
kmd-content-xs
kmd-content-xxs

General Grid classes (all breakpoints)

Class Properties
col-12 width: 100%;
col-11 width: 91.66666667%
col-10 width: 83.33333333%;
col-9 width: 75%
col-8 width: 66.66666667%;
col-7 width: 58.33333333%;
col-6 width: 50%;
col-5 width: 41.66666667%;
col-4 width: 33.33333333%;
col-3 width: 25%;
col-2 width: 16.66666667%
col-1 width: 8.33333333%;

Breakpoint specific Grid classes (general grid class overrides)

Large Desktop Normal Desktop Small Desktop - Large Tablet Tablet Mobile
xl-col-12 lg-col-12 md-col-12 sm-col-12 xs-col-12
xl-col-11 lg-col-11 md-col-11 sm-col-11 xs-col-11
xl-col-10 lg-col-10 md-col-10 sm-col-10 xs-col-10
xl-col-9 lg-col-9 md-col-9 sm-col-9 xs-col-9
xl-col-8 lg-col-8 md-col-8 sm-col-8 xs-col-8
xl-col-7 lg-col-7 md-col-7 sm-col-7 xs-col-7
xl-col-6 lg-col-6 md-col-6 sm-col-6 xs-col-6
xl-col-5 lg-col-5 md-col-5 sm-col-5 xs-col-5
xl-col-4 lg-col-4 md-col-4 sm-col-4 xs-col-4
xl-col-2 lg-col-2 md-col-2 sm-col-2 xs-col-2
xl-col-1 lg-col-1 md-col-1 sm-col-1 xs-col-1






Column #1 - xl-col-11 lg-col-11 md-col-9 sm-col-12 xs-col-12
Column #2 - xl-col-1 lg-col-1 md-col-3 sm-col-12 xs-col-12


Column #1 - xl-col-5 lg-col-5 md-col-6 sm-col-12 xs-col-12 md-pos-1 sm-pos-1 xs-pos-1
Column #2 - xl-col-2 lg-col-2 md-col-12 sm-col-12 xs-col-12 md-pos-3 sm-pos-3 xs-pos-3
Column #3 - xl-col-5 lg-col-5 md-col-6 sm-col-12 xs-col-12 md-pos-2 sm-pos-2 xs-pos-2



10 columns layout

Large Desktop Normal Desktop Small Desktop - Large Tablet
xl-1-of-10 lg-1-of-10 md-1-of-10
xl-2-of-10 lg-2-of-10 md-2-of-10
xl-3-of-10 lg-3-of-10 md-3-of-10
xl-4-of-10 lg-4-of-10 md-4-of-10
xl-5-of-10 lg-5-of-10 md-5-of-10
xl-6-of-10 lg-6-of-10 md-6-of-10
xl-7-of-10 lg-7-of-10 md-7-of-10
xl-8-of-10 lg-8-of-10 md-8-of-10
xl-9-of-10 lg-9-of-10 md-9-of-10
xl-10-of-10 lg-10-of-10 md-10-of-10

Example of mixed grid use 12 columns and 10 columns

Column #1 xl-4-of-10 lg-4-of-10 md-col-6 sm-col-12 xs-col-12
Column #1 xl-2-of-10 lg-4-of-10 md-col-6 sm-col-12 xs-col-12
Column #1 xl-4-of-10 lg-2-of-10 md-col-12 sm-col-12 xs-col-12



Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text