Как управлять расположением блоков при адаптивной верстке ?

Question

[nepster-web]

Есть 3 блока, они все стоят в ряд. При ресайзе на определенное разрешение нужно взять центровой блок и поместить вперед, остальные два под него, вот таким образом:



Возможно ли такое реализовать без flexbox?

Answer 1

[Дмитрий Ермолаев]

решение на css с медиа запросами
ссылка на пример внизу

html:

<div class="box">
  <div class="block block_1">block # 1</div>
  <div class="block block_2">block # 2</div>
  <div class="block block_3">block # 3</div>
</div>

css:

.box{
  width: 400px;
  margin: 50px auto;
}

.box:before {
  background-color: rgb(100, 250, 100);
  display: block;
  content: "full";
}

.block {
  width: 33.3333%;
  height: 100px;
  border: 1px dotted black;
  box-sizing: border-box;
  display: inline-block;
}

.block_1 {
  float: none;
}

.block_2 {
  float: left;
}

.block_3{
  float: right;
}

@media (max-width: 600px) {
  .box:before {
    background-color: rgb(150, 150, 250);
    content: "mobile";
  }

  .block_1 {
    width: 100%;
  }

  .block_2 {
    width: 50%;
  }

  .block_3{
    width: 50%;
    float: left;
  }
}

codepen.io/iusfof/pen/Lmiep?editors=110 код в действии

Comments

[Дмитрий Ермолаев]

@Sergio-Jooom свои навыки оттачивать можно на подобных задачках)

[nepster-web]

@iusfof большое спасибо. Я еще по изучаю Ваше решение. Так-же накопал вот такое: jsbin.com/jedecu/1/edit?html,output

Answer 2

[zooks]

Реализуется через CSS media. Но желательно все-таки расположить красный блок слева.

Answer 3

[Alexander Mischuk]

Если есть возможность менять разметку, то красный блок ставьте первым в разметке. Это значительно упростит задачу.
Если нет возможности править разметку, то через абсолютное позиционирование можно для нужного блока, но этот вариант в крайних случаях нужно использовать. Всё же стоит пересмотреть разметку, как уже сказали раньше.

Comments

[nepster-web]

да возможность есть. Но все-же не могу придумать как его красиво двигать.

[Alexander Mischuk]

А что тут красивого? Сейчас стоит width: 33.333%? Для нужного разрешения меняйте значение ширины на 100 процентов у нужного блока и всё. Что за вопросы вообще?
Пользуйтесь поиском на хабрахабре, почитайте статьи. Ничего сложного.

[nepster-web]

эм, красный блок должен быть всегда по центру, для мобил вверху. Щас капаю в сторону сеток бутстрапа.

[Alexander Mischuk]

Удачи!

Answer 4

[xmoonlight]

добавьте блок сверху высотой в 0px и в середине (где красный на 1-м рисунке, так же: в 0px) и в зависимости от ширины меняйте через JS вывод контента в один из этих блоков.
Мобильный - выводите в верхний.
Обычный - в средний.

Comments

[nepster-web]

никаких js скриптов в верстке.

[xmoonlight]

рискну предположить, что у картинки должен быть стиль vertical-align:top, а у левого и правого контейнера - vertical-align:bottom;display:inline-block и все это в общем контейнере с автоматической высотой...