.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%;}
}

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

درود، وقتتون بخیر.

انتخابگر [class^="col-"] به تمامی کلاس‌هایی که با "col-" شروع می‌شن اعمال می‌شه.
اما شما در کد کلاس‌هایی مثل col-xs-1, col-md-1 و غیره دارید که این انتخابگر رو تحت تأثیر قرار نمی‌دن، چون col-xs یا col-md هم در نظر گرفته نشده.

راه‌حل: انتخابگر رو به این شکل تغییر بدید:

[class^="col-"], [class*=" col-"] {
 float: right;
}

اینطوری تمام کلاس‌هایی که شامل "col-" هستند (چه اول، چه وسط) انتخاب می‌شن.

ببینید:

[attribute^="value"]

این انتخابگر عناصری رو هدف قرار می‌ده که مقدار ویژگی مشخص‌ شده (در اینجا class) با رشته مشخص‌شده (value) شروع می‌شه.

مثلاً:

[class^="col-"] {
  color: red;
}

این کد فقط کلاس‌هایی مثل col-1, col-xs-6, و col-md-4 رو انتخاب می‌کنه، چون مقدار class دقیقاً با col- شروع می‌شه.

اما اگر کلاس‌های دیگه‌ای مثل container col-6 یا row col-4 داشته باشید، این انتخابگر روی اون‌ها تأثیری نداره، چون مقدار class با col- شروع نشده.

[attribute*="value"]

این انتخابگر عناصری رو هدف قرار می‌ده که مقدار ویژگی مشخص‌ شده شامل رشته مشخص‌شده (value) باشه، در هر جای متن.

مثلاً:

[class*="col-"] {
 color: blue;
}

این کد تمامی کلاس‌هایی که حاوی col- هستن رو انتخاب می‌کنه، چه در ابتدا، چه در وسط یا انتهای مقدار class. بنابراین، هم col-md-6 و هم container col-md-6 و حتی row col-4 انتخاب می‌شن.
 

وقتی شما از [class^="col-"] استفاده می‌کنید، فقط عناصری که مقدار class دقیقاً با col- شروع می‌شه انتخاب می‌شن. اما اگر عنصر شما کلاس‌های دیگه‌ای قبل از col- داشته باشه (مثل row col-xs-6)، این انتخابگر دیگه عمل نمی‌کنه.

وقتی [class*="col-"] رو جایگزین می‌کنید انتخابگر همه عناصری که کلاسشون شامل col- هست (صرف‌نظر از موقعیتش) رو انتخاب می‌کنه.

بنابراین مشکلتون حل می‌شه.

اگر می‌دونید که کلاس‌های دیگه‌ای ممکنه همراه col- باشن، بهتره همیشه از [class*="col-"] استفاده کنید، چون مطمئن‌تره.

اما اگر مطمئنید که کلاس‌های مربوطه همیشه دقیقاً با col- شروع می‌شن، [class^="col-"] هم جواب می‌ده. فقط مطمئن بشید که ترتیب کلاس‌ها در HTML درست باشه.