.row{display:flex;
     flex-wrap: wrap;           
    }
.col {
    flex: 1 0 0;
    }
.container {
    max-width:1200px;
    margin: auto;
}
.col-1 {
    flex:0 0 calc(100% / 12 * 1);
}
.col-2 {
    flex:0 0 calc(100% / 12 * 2);
}
.col-3 {
    flex:0 0 calc(100% / 12 * 3);
}
.col-4 {
    flex:0 0 calc(100% / 12 * 4);
}
.col-5 {
    flex:0 0 calc(100% / 12 * 5);
}
.col-6 {
    flex:0 0 calc(100% / 12 * 6);
}
.col-7 {
    flex:0 0 calc(100% / 12 * 7);
}
.col-8 {
    flex:0 0 calc(100% / 12 * 8);
}
.col-9 {
    flex:0 0 calc(100% / 12 * 9);
}
.col-10 {
    flex:0 0 calc(100% / 12 * 10);
}
.col-11 {
    flex:0 0 calc(100% / 12 * 11);
}
.col-12 {
    flex:0 0 calc(100% / 12 * 12);
}

@media(min-width: 720px){
    .col-sm {
        flex: 1 0 0;
    }
    
    .col-sm-1 {
        flex:0 0 calc(100% / 12 * 1);
    }
    .col-sm-2 {
        flex:0 0 calc(100% / 12 * 2);
    }
    .col-sm-3 {
        flex:0 0 calc(100% / 12 * 3);
    }
    .col-sm-4 {
        flex:0 0 calc(100% / 12 * 4);
    }
    .col-sm-5 {
        flex:0 0 calc(100% / 12 * 5);
    }
    .col-sm-6 {
        flex:0 0 calc(100% / 12 * 6);
    }
    .col-sm-7 {
        flex:0 0 calc(100% / 12 * 7);
    }
    .col-sm-8 {
        flex:0 0 calc(100% / 12 * 8);
    }
    .col-sm-9 {
        flex:0 0 calc(100% / 12 * 9);
    }
    .col-sm-10 {
        flex:0 0 calc(100% / 12 * 10);
    }
    .col-sm-11 {
        flex:0 0 calc(100% / 12 * 11);
    }
    .col-sm-12 {
        flex:0 0 calc(100% / 12 * 12);
    }
}
@media(min-width: 1200px){
    .col-lg {
        flex: 1 0 0;
    }
    
    .col-lg-1 {
        flex:0 0 calc(100% / 12 * 1);
    }
    .col-lg-2 {
        flex:0 0 calc(100% / 12 * 2);
    }
    .col-lg-3 {
        flex:0 0 calc(100% / 12 * 3);
    }
    .col-lg-4 {
        flex:0 0 calc(100% / 12 * 4);
    }
    .col-lg-5 {
        flex:0 0 calc(100% / 12 * 5);
    }
    .col-lg-6 {
        flex:0 0 calc(100% / 12 * 6);
    }
    .col-lg-7 {
        flex:0 0 calc(100% / 12 * 7);
    }
    .col-lg-8 {
        flex:0 0 calc(100% / 12 * 8);
    }
    .col-lg-9 {
        flex:0 0 calc(100% / 12 * 9);
    }
    .col-lg-10 {
        flex:0 0 calc(100% / 12 * 10);
    }
    .col-lg-11 {
        flex:0 0 calc(100% / 12 * 11);
    }
    .col-lg-12 {
        flex:0 0 calc(100% / 12 * 12);
    }
}