Percentage cols
By default you have 12 different sizing columns
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
Fixed and grow cols
By default you have 12 sizes for .col-grow (1 to 12)
.col-fixed with flex-basis 200px
.col-grow-1 or .col-grow or just .col
.col-12.col-md-3
.col-grow-3
.col-grow-6
Offsets
.col-3.col-offset-3
.col-3.col-offset-1
.col-3.col-offset-4
.col-3.col-offset-n7 (negative 7)
Horizontal align
.row.row-start (default)
.row.row-end
.row.row-center
.row.row-sb
.row.row-sa
Vertical align
.row.row-va-stretch (default)
.row.row-va-top
.row.row-va-bottom
.row.row-va-center
.row.row-va-sb
.row.row-va-sa
Vertical stretch
.row.row-s-stretch (default)
height 40px
height 140px
height 85px
height 70px
.row.row-s-top
height 40px
height 140px
height 85px
height 70px
.row.row-s-bottom
height 40px
height 140px
height 85px
height 70px
.row.row-s-center
height 40px
height 140px
height 85px
height 70px
Elements direction
.row.row-normal (default)
.row.row-reverse
.row.row-vertical
.row.row-vertical-reverse
Rows wrap
.row.row-wrap (default)
I'm 1st (.col-6)
I'm 2nd (.col-6)
I'm 3th (.col-6)
.row.row-nowrap
I'm 1st (.col-6)
I'm 2nd (.col-6)
I'm 3th (.col-6)
.row.row-wrap-reverse
I'm 1st (.col-6)
I'm 2nd (.col-6)
I'm 3th (.col-6)
Self ordering
By default supports order from -6 to 6
I'm 1st but .col-order-1
I'm 2nd but .col-order-2
I'm 3th but .col-order-0
I'm 4th but .col-order-n1 (negative 1)
Self align
.col-bottom
height 40px
height 140px
.col-center
height 85px
.col-top
height 70px
.col-stretch
height 50px
Basic responsive
.col-7.col-md-3
.col-5.col-md-9
.col-4.col-md-8.col-lg-6
.col-8.col-md-4.col-lg-6
.col-grow-1.col-lg-2
.col-grow-1.col-lg-7
.col-grow-1.col-lg-3
.col-9.col-md-grow-1
.col-3.col-md-grow-6
Offsets
.col-3.col-md-offset-1
.col-3.col-lg-offset-5
Responsive rows modifiers
You can use all modifier classes of rows and cols with responsive modifiers by add 'md' or 'lg' prefixes
.row.row-md-center.row-lg-end
I'm on the right only on big screens,
centered on middle size screens and on the left on small one
.row.row-va-bottom.row-md-va-center.row-lg-va-top
We on the top on big screens, centered on
middle and on the bottom on small
.row.row-s-center.row-md-s-top.row-lg-s-stretch
We stretch on big screens,
stick on bottom on middle screens
and centered
on small
.row.row-md-vertical-reverse.row-lg-vertical
We vertical on big & small screens
and reverse vertical on middle one
.row.row-wrap.row-md-nowrap
I'm 1st (.col-6)
I'm 2nd (.col-6)
I'm 3th (.col-6)
Responsive self ordering
.col-order-2.
.col-md-order-3
.col-lg-order-1
.col-order-3
.col-md-order-1
.col-lg-order-2
.col-order-1
.col-md-order-2
.col-lg-order-3
Responsive self align
.col-bottom
.col-md-center
.col-lg-top
.col-md-bottom
.col-top
.col-md-stretch
.col-lg-bottom
Responsive helpers
I'm visible only on large screens
.sm-hidden.md-hidden
I'm visible only on middle screens
.sm-hidden.lg-hidden
I'm visible only on small screens
.md-hidden.lg-hidden
3 Column layout example
Header
Navigation
Article
Sidebar
Footer
