2

Подскажите пожалуйста, как проставить правильно классы Чтоб из первого изображения для размера экра в 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

1 ответ 1

2

Такие вещи верстать нужно начиная с самого мелкого экрана

.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-6 col-md-2"><div class="bl block1">1</div></div>
  <div class="t col-xs-6  col-md-2 col-md-push-5"><div class="bl block3">2</div></div>
  <div class="t col-xs-12 col-md-4 col-md-offset-1 col-md-pull-2"><div class="bl block2">3</div></div>
  <div class="t col-xs-12 col-md-3"><div class="bl block4">4</div></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.