.row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.col {
    position: relative;
    width: 100%;
    display: flex;
    flex-grow: 1;
    /*flex-basis: 0;*/
}
.row-gutters {
    margin-right: -5px;
    margin-left: -5px;
}
.row-gutters .col {
    padding: 0 5px 10px 5px;
}

.col-one {  flex: 0 0 100.00%; max-width: 100.00%; }
.col-two {  flex: 0 0 50.00%; max-width: 50.00%; }
.col-three {  flex: 0 0 33.33%; max-width: 33.33%; }
.col-four {  flex: 0 0 25.00%; max-width: 25.00%; }
.col-five {  flex: 0 0 20.00%; max-width: 20.00%; }
.col-six {  flex: 0 0 16.66%; max-width: 16.66%; }
.col-seven {  flex: 0 0 14.28%; max-width: 14.28%; }
.col-eight {  flex: 0 0 12.50%; max-width: 12.50%; }

@media (min-width: 575px) {
    .col-sm-one {  flex: 0 0 100.00%; max-width: 100.00%; }
    .col-sm-two {  flex: 0 0 50.00%; max-width: 50.00%; }
    .col-sm-three {  flex: 0 0 33.33%; max-width: 33.33%; }
    .col-sm-four {  flex: 0 0 25.00%; max-width: 25.00%; }
    .col-sm-five {  flex: 0 0 20.00%; max-width: 20.00%; }
    .col-sm-six {  flex: 0 0 16.66%; max-width: 16.66%; }
    .col-sm-seven {  flex: 0 0 14.28%; max-width: 14.28%; }
    .col-sm-eight {  flex: 0 0 12.50%; max-width: 12.50%; }
}

@media (min-width: 767px) {
    .col-md-one {  flex: 0 0 100.00%; max-width: 100.00%; }
    .col-md-two {  flex: 0 0 50.00%; max-width: 50.00%; }
    .col-md-three {  flex: 0 0 33.33%; max-width: 33.33%; }
    .col-md-four {  flex: 0 0 25.00%; max-width: 25.00%; }
    .col-md-five {  flex: 0 0 20.00%; max-width: 20.00%; }
    .col-md-six {  flex: 0 0 16.66%; max-width: 16.66%; }
    .col-md-seven {  flex: 0 0 14.28%; max-width: 14.28%; }
    .col-md-eight {  flex: 0 0 12.50%; max-width: 12.50%; }
}

@media (min-width: 991px) {
    .col-lg-one {  flex: 0 0 100.00%; max-width: 100.00%; }
    .col-lg-two {  flex: 0 0 50.00%; max-width: 50.00%; }
    .col-lg-three {  flex: 0 0 33.33%; max-width: 33.33%; }
    .col-lg-four {  flex: 0 0 25.00%; max-width: 25.00%; }
    .col-lg-five {  flex: 0 0 20.00%; max-width: 20.00%; }
    .col-lg-six {  flex: 0 0 16.66%; max-width: 16.66%; }
    .col-lg-seven {  flex: 0 0 14.28%; max-width: 14.28%; }
    .col-lg-eight {  flex: 0 0 12.50%; max-width: 12.50%; }
}

@media (min-width: 1199px) {
    .col-xl-one {  flex: 0 0 100.00%; max-width: 100.00%; }
    .col-xl-two {  flex: 0 0 50.00%; max-width: 50.00%; }
    .col-xl-three {  flex: 0 0 33.33%; max-width: 33.33%; }
    .col-xl-four {  flex: 0 0 25.00%; max-width: 25.00%; }
    .col-xl-five {  flex: 0 0 20.00%; max-width: 20.00%; }
    .col-xl-six {  flex: 0 0 16.66%; max-width: 16.66%; }
    .col-xl-seven {  flex: 0 0 14.28%; max-width: 14.28%; }
    .col-xl-eight {  flex: 0 0 12.50%; max-width: 12.50%; }
}


/*
.row {
justify-content: space-between;
display: flex;
flex-wrap: wrap;

}

.col {
width: 100%;
flex-grow: inherit;
}

.xs-one { width: 100%; }
.xs-two { width: 50%; }
.md-gutters .xs-two {  width: calc(50% - 7px); }
.xs-three {width: 33.33%;	}
.md-gutters .xs-three {  width: calc(33.33% - 7px); }
.xs-four {width: 25% }
.md-gutters .xs-four { width: calc(25% - 7px); }
.xs-five {width: 20% }
.xs-six {  width: 16.66% }

@media ( min-width : 381px) {
    .sm-two { width: 50%; }
    .sm-gutters .sm-two {  width: calc(50% - 7px); }
    .sm-three { width: 33.33%;	}
    .sm-gutters .sm-three {  width: calc(33.33% - 7px); }
    .sm-four { width: 25% }
    .sm-gutters .sm-four { width: calc(25% - 7px); }
    .sm-five { width: 20% }
    .sm-six {  width: 16.66% }
}

@media ( min-width: 769px) {
    .md-two { width: 50%; }
    .md-gutters .md-two {  width: calc(50% - 7px); }
    .md-three {width: 33.33%;	}
    .md-gutters .md-three {  width: calc(33.33% - 7px); }
    .md-four {width: 25% }
    .md-gutters .md-four { width: calc(25% - 7px); }
    .md-five {width: 20% }
    .md-six {  width: 16.66% }
}

@media ( min-width : 1025px) {
    .xl-one { width: 100%; }

    .xl-two { width: 50%; }
    .md-gutters .xl-two {  width: calc(50% - 7px); }

    .xl-three {width: 33.33%;	}
    .md-gutters .xl-three {  width: calc(33.33% - 7px); }

    .xl-four {width: 25% }
    .md-gutters .xl-four { width: calc(25% - 7px); }

    .xl-five {width: 20% }
    .md-gutters .xl-five { width: calc(20% - 7px); }
    .xl-six {  width: 16.66% }
    .md-gutters .xl-six { width: calc(16.66% - 7px); }
}
*/