Подскажите пожалуйста, как проставить правильно классы Чтоб из первого изображения для размера экра в MD блоки перестраивались во второе XS. Вот пример
.bl {
width: 100%;
min-height: 40px;
font-size: 40px;
text-align: center;
}
.t {
border: 1px solid #000;
}
.block1 {
background-color: #f00;
}
.block2 {
background-color: #ff0;
}
.block3 {
background-color: #00f;
}
.block4 {
background-color: #0ff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="t col-xs-12 col-md-2">
<div class="bl block1">1</div>
</div>
<div class="t col-xs-12 col-md-4 col-md-offset-1">
<div class="bl block2">3</div>
</div>
<div class="t col-xs-12 col-md-2 clearfix">
<div class="bl block3">2</div>
</div>
<div class="t col-xs-12 col-md-3">
<div class="bl block4">4</div>
</div>
</div>
Я чёт пробую прописать через col-xs-pull-6 col-xs-push-6 но у меня ничего не выходит. Как его поменять так что б при md и выше блоки распологались так как на фото 1 а при xs как на фото 2