Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

    

        
Responsive
    

Fluid

Percent based widths allow fluid resizing of columns and rows.

.col-xs-6 {
  flex-basis: 50%;
}

Simple Syntax

All you need to remember is row, column, content.

    

        
12
    

Offsets

Offset a column

    

        
offset
    

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

    

        
auto
    

Nested Grids

Nest grids inside grids inside grids.

    

        

            

                

                    
auto
                
            
        
    

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

    

        

            start
        
    

.center-

    

        

            start
        
    

.end-

    

        

            end
        
    

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

    

        

            All together now
        
    

.top-

    

        

            top
        
    

.middle-

    

        

            center
        
    

.bottom-

    

        

            bottom
        
    

Distribution

Add classes to distribute the contents of a row or column.

.around-

    

        

            around
        
    
    

        

            around
        
    
    

        

            around
        
    

.between-

    

        

            between
        
    
    

        

            between
        
    
    

        

            between
        
    

Reordering

Add classes to reorder columns.

.first-

    

        

            1
        
    
    

        

            2
        
    
    

        

            3
        
    

.last-

    

        

            1
        
    
    

        

            2
        
    
    

        

            3
        
    

Reversing

.reverse

    

        

            1
        
    
    

        

            2
        
    
    

        

            3