.basic-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-right: -15px;
    margin-left: -15px;
}

.basic-row .basic-col {
    flex-basis: 100%;
    flex: 1;
    padding-right: 15px;
    padding-left: 15px;
}

.basic-row .basic-col.one { flex: 0 0 8.333333%; max-width: 8.333333%; }
.basic-row .basic-col.two { flex: 0 0 16.666667%; max-width: 16.666667%; }
.basic-row .basic-col.three { flex: 0 0 25%; max-width: 25%; }
.basic-row .basic-col.four { flex: 0 0 33.333333%; max-width: 33.333333%; }
.basic-row .basic-col.five { flex: 0 0 41.666667%; max-width: 41.666667%; }
.basic-row .basic-col.six { flex: 0 0 50%; max-width: 50%; }
.basic-row .basic-col.seven { flex: 0 0 58.333333%; max-width: 58.333333%; }
.basic-row .basic-col.eight { flex: 0 0 66.666667%; max-width: 66.666667%; }
.basic-row .basic-col.nine { flex: 0 0 75%; max-width: 75%; }
.basic-row .basic-col.ten { flex: 0 0 83.333333%; max-width: 83.333333%; }
.basic-row .basic-col.eleven { flex: 0 0 91.666667%; max-width: 91.666667%; }
.basic-row .basic-col.twelve { flex: 0 0 100%; max-width: 100%; }

.basic-row.center-vertical { align-items: center; }
.basic-row.row-reverse { flex-direction: row-reverse; }

@media screen and (max-width: 992px) {
    .basic-row:not(.small) { display: block; }
    .basic-row:not(.small) > .basic-col { flex: 0 0 100% !important; max-width: 100% !important; }
}