Gridflex

Grid Breakpoints

Add class to HTML like this .D-6 .{classname}-{column}

Desktop
100%

Laptop
1200px

Tablet
992px

Mobile
768px

Small Mobile
568px

Auto layout

Layout with Flexbox just add only classname without number.
Columns will be full width when each breackpoints are active with CSS media query

		
		  
		    ...
		    ...
		    ...

Grid alignment

Use the flexbox alignment utilities to align columns.

Vertical align seft (Column)

Add below class into column to vertically align seft.

.vertical-top

.vertical-middle

.vertical-bottom

		
		  
		    ...
		    ...
		    ...

Vertical align

Add below class into row to vertically align all columns.

.columns-top

.columns-middle

.columns-bottom

		
		  
		    ...
		    ...
		    ...

Horizontal alignment

Add below class into row to horizontaly align all columns.

.columns-left

.columns-center

.columns-right

.columns-between

.columns-around

		
		  
		    ...
		    ...
		    ...

Grid Order

Flexbox utilities for controlling the visual order of your content.
Add class to HTML like this .M-order-2 .{classname}-order-{order number}

1 change to 3

2 change to 1

3 change to 2

		
		  
		    ...
		    ...
		    ...