“ Grid layouts to get you familiar with building within the flexible grid system. " FlexibleGrid works very similarly to the standard float grid, but includes a number of different features only possible with flex, like horizontal and vertical alignment, auto sizing, and easier source ordering.
flex-grid Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, lg & xl viewport widths.
@media / no queries
On mobile devices (.column-), tablets and below, the columns will automatically stack.
.column-3
.column-3
.column-3
.column-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column-3">.column-3</div>
                    <div class="column-3">.column-3</div>
                    <div class="column-3">.column-3</div>
                </div>
            
        
@media (min-width: 0px)
.column xs-(12/11/10/9/8/7/6/5/4/3/2/1)
.xs-3
.xs-3
.xs-3
.xs-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column xs-3">.xs-3</div>
                    <div class="column xs-3">.xs-3</div>
                    <div class="column xs-3">.xs-3</div>
                </div>
            
        
@media (min-width: 768px)
.column sm-(12/11/10/9/8/7/6/5/4/3/2/1)
.sm-3
.sm-3
.sm-3
.sm-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column sm-3">.sm-3</div>
                    <div class="column sm-3">.sm-3</div>
                    <div class="column sm-3">.sm-3</div>
                </div>
            
        
@media (min-width: 1024px)
.column md-(12/11/10/9/8/7/6/5/4/3/2/1)
.md-3
.md-3
.md-3
.md-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column md-3">.md-3</div>
                    <div class="column md-3">.md-3</div>
                    <div class="column md-3">.md-3</div>
                </div>
            
        
@media (min-width: 1279px)
.column lg-(12/11/10/9/8/7/6/5/4/3/2/1)
.lg-3
.lg-3
.lg-3
.lg-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column lg-3">.lg-3</div>
                    <div class="column lg-3">.lg-3</div>
                    <div class="column lg-3">.lg-3</div>
                </div>
            
        
@media (min-width: 1366px)
.column xl-(12/11/10/9/8/7/6/5/4/3/2/1)
.xl-3
.xl-3
.xl-3
.xl-3
            copy
            
                <div class="row  d-flex  flex-d-row">
                    <div class="column xl-3">.xl-3</div>
                    <div class="column xl-3">.xl-3</div>
                    <div class="column xl-3">.xl-3</div>
                </div>
            
        
copy