.container
{
    clear: both;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    background-color: red;
}
.row::after
{
    content: '';
    clear: both;
    display: table;
}
[class ^= "col-"] {
  float: right;
}
@media only  screen and (max-width : 576px)
{
    .col-xs-1 {width: 8.3%;}
    .col-xs-2 {width: 16.6%;}
    .col-xs-3 {width: 25%;}
    .col-xs-4 {width: 33.3%;}
    .col-xs-5 {width: 41.6%;}
    .col-xs-6 {width: 50%;}
    .col-xs-7 {width: 58.3%;}
    .col-xs-8 {width: 66.6%;}
    .col-xs-9 {width: 75%;}
    .col-xs-10 {width: 83.3%;}
    .col-xs-11 {width: 91.6%;}
    .col-xs-12 {width: 100%;}
}
@media only  screen and (min-width : 576px)
{
    .col-s-1 {width: 8.3%;}
    .col-s-2 {width: 16.6%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.3%;}
    .col-s-5 {width: 41.6%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.3%;}
    .col-s-8 {width: 66.6%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.3%;}
    .col-s-11 {width: 91.6%;}
    .col-s-12 {width: 100%;}
}
@media only  screen and (min-width : 768px)
{
    .col-md-1 {width: 8.3%;}
    .col-md-2 {width: 16.6%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.3%;}
    .col-md-5 {width: 41.6%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.3%;}
    .col-md-8 {width: 66.6%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 83.3%;}
    .col-md-11 {width: 91.6%;}
    .col-md-12 {width: 100%;}
}
@media only  screen and (min-width : 992px)
{
    .col-l-1 {width: 8.3%;}
    .col-l-2 {width: 16.6%;}
    .col-l-3 {width: 25%;}
    .col-l-4 {width: 33.3%;}
    .col-l-5 {width: 41.6%;}
    .col-l-6 {width: 50%;}
    .col-l-7 {width: 58.3%;}
    .col-l-8 {width: 66.6%;}
    .col-l-9 {width: 75%;}
    .col-l-10 {width: 83.3%;}
    .col-l-11 {width: 91.6%;}
    .col-l-12 {width: 100%;}
}
@media only  screen and (min-width : 1200px)
{
    .col-xl-1 {width: 8.3%;}
    .col-xl-2 {width: 16.6%;}
    .col-xl-3 {width: 25%;}
    .col-xl-4 {width: 33.3%;}
    .col-xl-5 {width: 41.6%;}
    .col-xl-6 {width: 50%;}
    .col-xl-7 {width: 58.3%;}
    .col-xl-8 {width: 66.6%;}
    .col-xl-9 {width: 75%;}
    .col-xl-10 {width: 83.3%;}
    .col-xl-11 {width: 91.6%;}
    .col-xl-12 {width: 100%;}
}

الان این درست اجرا نمیشه وقتی بجای =^ از =* استفاده میکنم درست میشه