Grid based on CSS3 flexbox (LESS version) http://flexboxgrid.com

flexboxgrid.less

.grid {
    padding-right: 2rem;
    padding-left: 2rem;
}
.row {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}
.row.reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-flex-wrap: row-reverse;
    -ms-flex-wrap: row-reverse;
    flex-wrap: row-reverse;
}
.col.reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-flex-wrap: column-reverse;
    -ms-flex-wrap: column-reverse;
    flex-wrap: column-reverse;
}
.col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12 {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.col-xs {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
}
.col-xs-1 {
    -webkit-flex-basis: 8.333333333%;
    -ms-flex-preferred-size: 8.333333333%;
    flex-basis: 8.333333333%;
    max-width: 8.333333333%;
}
.col-xs-2 {
    -webkit-flex-basis: 16.666666667%;
    -ms-flex-preferred-size: 16.666666667%;
    flex-basis: 16.666666667%;
    max-width: 16.666666667%;
}
.col-xs-3 {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
}
.col-xs-4 {
    -webkit-flex-basis: 33.333333333%;
    -ms-flex-preferred-size: 33.333333333%;
    flex-basis: 33.333333333%;
    max-width: 33.333333333%;
}
.col-xs-5 {
    -webkit-flex-basis: 41.666666667%;
    -ms-flex-preferred-size: 41.666666667%;
    flex-basis: 41.666666667%;
    max-width: 41.666666667%;
}
.col-xs-6 {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
}
.col-xs-7 {
    -webkit-flex-basis: 58.333333333%;
    -ms-flex-preferred-size: 58.333333333%;
    flex-basis: 58.333333333%;
    max-width: 58.333333333%;
}
.col-xs-8 {
    -webkit-flex-basis: 66.666666667%;
    -ms-flex-preferred-size: 66.666666667%;
    flex-basis: 66.666666667%;
    max-width: 66.666666667%;
}
.col-xs-9 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
}
.col-xs-10 {
    -webkit-flex-basis: 83.333333333%;
    -ms-flex-preferred-size: 83.333333333%;
    flex-basis: 83.333333333%;
    max-width: 83.333333333%;
}
.col-xs-11 {
    -webkit-flex-basis: 91.666666667%;
    -ms-flex-preferred-size: 91.666666667%;
    flex-basis: 91.666666667%;
    max-width: 91.666666667%;
}
.col-xs-12 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}
.col-xs-offset-1 {
    margin-left: 8.333333333%;
}
.col-xs-offset-2 {
    margin-left: 16.666666667%;
}
.col-xs-offset-3 {
    margin-left: 25%;
}
.col-xs-offset-4 {
    margin-left: 33.333333333%;
}
.col-xs-offset-5 {
    margin-left: 41.666666667%;
}
.col-xs-offset-6 {
    margin-left: 50%;
}
.col-xs-offset-7 {
    margin-left: 58.333333333%;
}
.col-xs-offset-8 {
    margin-left: 66.666666667%;
}
.col-xs-offset-9 {
    margin-left: 75%;
}
.col-xs-offset-10 {
    margin-left: 83.333333333%;
}
.col-xs-offset-11 {
    margin-left: 91.666666667%;
}
.start-xs {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start;
}
.center-xs {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}
.end-xs {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end;
}
.top-xs {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.middle-xs {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.bottom-xs {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.around-xs {
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.between-xs {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.first-xs {
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
}
.last-xs {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}
@media {
    only {
        screen {
            and {
                (min-width: {
                    48em) {
                        .col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-offset-1,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12;
                    }
                    62em) {
                        .col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-offset-1,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12;
                    }
                    75em) {
                        .col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-offset-1,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12;
                    }
                }
            }
        }
    }
}
-moz-box-sizing: {
    border-box;box-sizing: {
        border-box;display: {
            -webkit-box;display: {
                -webkit-flex;display: {
                    -ms-flexbox;display: {
                        flex;-webkit-box-orient: {
                            vertical;-webkit-box-direction: {
                                normal;-webkit-flex-direction: {
                                    column;-ms-flex-direction: {
                                        column;flex-direction: {
                                            column;-webkit-box-flex: {
                                                0;-webkit-flex-grow: {
                                                    0;-ms-flex-positive: {
                                                        0;flex-grow: {
                                                            0;-webkit-flex-shrink: {
                                                                0;-ms-flex-negative: {
                                                                    0;flex-shrink: {
                                                                        0;padding-right: {
                                                                            0.5rem;padding-left: {
                                                                                0.5rem; {
                                                                                    .col-sm .col-md .col-lg;
                                                                                }
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
-webkit-box-flex: {
    1;-webkit-flex-grow: {
        1;-ms-flex-positive: {
            1;flex-grow: {
                1;-webkit-flex-basis: {
                    0;-ms-flex-preferred-size: {
                        0;flex-basis: {
                            0;max-width: {
                                100%; {
                                    .col-sm-1 .col-md-1 .col-lg-1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
-webkit-flex-basis: {
    8.333333333%;-ms-flex-preferred-size: {
        8.333333333%;flex-basis: {
            8.333333333%;max-width: {
                8.333333333%; {
                    .col-sm-2 .col-md-2 .col-lg-2;
                }
            }
        }
    }
    16.666666667%;-ms-flex-preferred-size: {
        16.666666667%;flex-basis: {
            16.666666667%;max-width: {
                16.666666667%; {
                    .col-sm-3 .col-md-3 .col-lg-3;
                }
            }
        }
    }
    25%;-ms-flex-preferred-size: {
        25%;flex-basis: {
            25%;max-width: {
                25%; {
                    .col-sm-4 .col-md-4 .col-lg-4;
                }
            }
        }
    }
    33.333333333%;-ms-flex-preferred-size: {
        33.333333333%;flex-basis: {
            33.333333333%;max-width: {
                33.333333333%; {
                    .col-sm-5 .col-md-5 .col-lg-5;
                }
            }
        }
    }
    41.666666667%;-ms-flex-preferred-size: {
        41.666666667%;flex-basis: {
            41.666666667%;max-width: {
                41.666666667%; {
                    .col-sm-6 .col-md-6 .col-lg-6;
                }
            }
        }
    }
    50%;-ms-flex-preferred-size: {
        50%;flex-basis: {
            50%;max-width: {
                50%; {
                    .col-sm-7 .col-md-7 .col-lg-7;
                }
            }
        }
    }
    58.333333333%;-ms-flex-preferred-size: {
        58.333333333%;flex-basis: {
            58.333333333%;max-width: {
                58.333333333%; {
                    .col-sm-8 .col-md-8 .col-lg-8;
                }
            }
        }
    }
    66.666666667%;-ms-flex-preferred-size: {
        66.666666667%;flex-basis: {
            66.666666667%;max-width: {
                66.666666667%; {
                    .col-sm-9 .col-md-9 .col-lg-9;
                }
            }
        }
    }
    75%;-ms-flex-preferred-size: {
        75%;flex-basis: {
            75%;max-width: {
                75%; {
                    .col-sm-10 .col-md-10 .col-lg-10;
                }
            }
        }
    }
    83.333333333%;-ms-flex-preferred-size: {
        83.333333333%;flex-basis: {
            83.333333333%;max-width: {
                83.333333333%; {
                    .col-sm-11 .col-md-11 .col-lg-11;
                }
            }
        }
    }
    91.666666667%;-ms-flex-preferred-size: {
        91.666666667%;flex-basis: {
            91.666666667%;max-width: {
                91.666666667%; {
                    .col-sm-12 .col-md-12 .col-lg-12;
                }
            }
        }
    }
    100%;-ms-flex-preferred-size: {
        100%;flex-basis: {
            100%;max-width: {
                100%; {
                    .col-sm-offset-1 .col-md-offset-1 .col-lg-offset-1;
                }
            }
        }
    }
}
margin-left: {
    8.333333333%;max-width: {
        8.333333333%; {
            .col-sm-offset-2;
        }
    }
    16.666666667%;max-width: {
        16.666666667%; {
            .col-sm-offset-3;
        }
    }
    25%; {
        .col-sm-offset-4 .col-md-offset-4 .col-lg-offset-4;
    }
    33.333333333%; {
        .col-sm-offset-5 .col-md-offset-5 .col-lg-offset-5;
    }
    41.666666667%; {
        .col-sm-offset-6 .col-md-offset-6 .col-lg-offset-6;
    }
    50%; {
        .col-sm-offset-7 .col-md-offset-7 .col-lg-offset-7;
    }
    58.333333333%; {
        .col-sm-offset-8 .col-md-offset-8 .col-lg-offset-8;
    }
    66.666666667%; {
        .col-sm-offset-9 .col-md-offset-9 .col-lg-offset-9;
    }
    75%; {
        .col-sm-offset-10 .col-md-offset-10 .col-lg-offset-10;
    }
    83.333333333%; {
        .col-sm-offset-11 .col-md-offset-11 .col-lg-offset-11;
    }
    91.666666667%; {
        .start-sm .start-md .start-lg;
    }
    8.333333333%; {
        .col-md-offset-2 .col-lg-offset-2;
    }
    16.666666667%; {
        .col-md-offset-3 .col-lg-offset-3;
    }
}
-webkit-box-pack: {
    start;-webkit-justify-content: {
        flex-start;-ms-flex-pack: {
            start;justify-content: {
                flex-start;text-align: {
                    start; {
                        .center-sm .center-md .center-lg;
                    }
                }
            }
        }
    }
    center;-webkit-justify-content: {
        center;-ms-flex-pack: {
            center;justify-content: {
                center;text-align: {
                    center; {
                        .end-sm .end-md .end-lg;
                    }
                }
            }
        }
    }
    end;-webkit-justify-content: {
        flex-end;-ms-flex-pack: {
            end;justify-content: {
                flex-end;text-align: {
                    end; {
                        .top-sm .top-md .top-lg;
                    }
                }
            }
        }
    }
    justify;-webkit-justify-content: {
        space-between;-ms-flex-pack: {
            justify;justify-content: {
                space-between; {
                    .first-sm .first-md .first-lg;
                }
            }
        }
    }
}
-webkit-box-align: {
    start;-webkit-align-items: {
        flex-start;-ms-flex-align: {
            start;align-items: {
                flex-start; {
                    .middle-sm .middle-md .middle-lg;
                }
            }
        }
    }
    center;-webkit-align-items: {
        center;-ms-flex-align: {
            center;align-items: {
                center; {
                    .bottom-sm .bottom-md .bottom-lg;
                }
            }
        }
    }
    end;-webkit-align-items: {
        flex-end;-ms-flex-align: {
            end;align-items: {
                flex-end; {
                    .around-sm .around-md .around-lg;
                }
            }
        }
    }
}
-webkit-justify-content: {
    space-around;-ms-flex-pack: {
        distribute;justify-content: {
            space-around; {
                .between-sm .between-md .between-lg;
            }
        }
    }
}
-webkit-box-ordinal-group: {
    0;-webkit-order: {
        -1;-ms-flex-order: {
            -1;order: {
                -1; {
                    .last-sm .last-md .last-lg;
                }
            }
        }
    }
}