Хотел разобратся как работает сетка бутстрапа на своем примере, но никак не могу придумать как менять аквивный класс для определенного разрешения. Вот пример для одного разрешения. Как стоило бы применять тот же ^col-xs-
для другого разрешения
.row:after {
display: block;
clear: both;
content: ''; }
.row + .row {
margin-top: 3%; }
[class^="col-"] {
float: left;
margin-right: 3%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
[class^="col-"]:last-child {
margin-right: 0%; }
.col-md-1 {
width: 5.58333%; }
.col-md-2 {
width: 14.16667%; }
.col-md-3 {
width: 22.75%; }
.col-md-4 {
width: 31.33333%; }
.col-md-5 {
width: 39.91667%; }
.col-md-6 {
width: 48.5%; }
.col-md-7 {
width: 57.08333%; }
.col-md-8 {
width: 65.66667%; }
.col-md-9 {
width: 74.25%; }
.col-md-10 {
width: 82.83333%; }
.col-md-11 {
width: 91.41667%; }
.col-md-12 {
width: 100%; }
.col-xs-1 {
width: 5.58333%; }
.col-xs-2 {
width: 14.16667%; }
.col-xs-3 {
width: 22.75%; }
.col-xs-4 {
width: 31.33333%; }
.col-xs-5 {
width: 39.91667%; }
.col-xs-6 {
width: 48.5%; }
.col-xs-7 {
width: 57.08333%; }
.col-xs-8 {
width: 65.66667%; }
.col-xs-9 {
width: 74.25%; }
.col-xs-10 {
width: 82.83333%; }
.col-xs-11 {
width: 91.41667%; }
.col-xs-12 {
width: 100%; }
<div class="row">
<div class="col-md-6">
col-6
</div>
<div class="col-md-6">
col-6
</div>
<div class="col-md-6">
col-6
</div>
</div>