*{
    margin: 0;
    padding: 0;
}

.grid-container{
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
}
.grid-container:before, .grid-container:after {
    content:"";
    display: table ;
    clear:both;
}
.box{
    box-sizing: border-box;
    float: left;
    padding: 10px;
}
.inner{
    height: 50px;
    border: 1px solid #999;
    background-color: #eee;
}

@media (min-width: 769px) {
    .col-md-1 { width: 8.33333%; }
    .col-md-2 { width: 16.66667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.33333%; }
    .col-md-5 { width: 41.66667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.33333%; }
    .col-md-8 { width: 66.66667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.33333%; }
    .col-md-11 { width: 91.66667%; }
    .col-md-12 { width: 100%; }
}
@media (max-width: 768px) {
    .col-sm-1 {  width: 8.33333%; }
    .col-sm-2 {  width: 16.66667%; }
    .col-sm-3 {  width: 25%; }
    .col-sm-4 {  width: 33.33333%; }
    .col-sm-5 {  width: 41.66667%; }
    .col-sm-6 {  width: 50%; }
    .col-sm-7 {  width: 58.33333%; }
    .col-sm-8 {  width: 66.66667%; }
    .col-sm-9 {  width: 75%; }
    .col-sm-10 {  width: 83.33333%; }
    .col-sm-11 {  width: 91.66667%; }
    .col-sm-12 {  width: 100%; }
}