Размещение блоков div во всё свободное пространство и их перестановка при изменении разрешения экрана

Question

У меня стояла задача разместить блоки согласно рисунку.

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

Адаптивную вёрстку делаю на css при помощи flex и order. Соответственно табличная вёрстка для первого рисунка мне не подходит, т.к на css я не смогу изменить положение строк и столбцов. Появился план в одном div'е разместить 5, чтобы можно было при помощи order изменить порядок их вывода для маленького экрана. Но подобрать стили я так и не смог. Я использовал следующие стили для основного контейнера:

.baseContainer{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   height: 400px;
   max-height: 800px;
   font-size: 0;
   width:800px;
}

Для вложенных контейнеров я использовал

width:x
height:y

Меняя значения х и у соответсвенно для каждого контейнера.
Максимум, что получилось, это разместить блоки 1, 2 как показано на рисунке, а 3, 4 и 5 размещаются один под другим(хотя для 4 блока есть свободное место рядом с 3им) Мне же нужны 3 и 4 на одной линии, а 5ый под ними. Помогите найти способ решения, нужно использовать именно css без js.

.baseContainer {
  width: 800px;
  height: 400px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.container1 {
  width: 10%;
  height: 100%;
}

.container2 {
  width: 10%;
  height: 100%;
}

.container3 {
  width: 40%;
  height: 10%;
}

.container4 {
  width: 40%;
  height: 10%;
}

.container5 {
  width: 80%;
  height: 80%;
}

<div class="baseContainer">
  <div class="container1">
    1
  </div>
  <div class="container2">
    2
  </div>
  <div class="container3">
    3
  </div>
  <div class="container4">
    4
  </div>
  <div class="container5">
    5
  </div>
</div>

Answer 1

Для того, чтобы разместить элементы, расположение которых должно динамически меняться, как это показано на рисунках, в зависимости от размеров экрана, JS частично задачу бы упростил. Но учитывая пожелания автора:

Помогите найти способ решения, нужно использовать именно css без js

Предлагаю следующий способ решения, который предусматривает добавление двух дополнительных контейнеров, а также комбинированное использование технологий Flex и Grid. Другого варианта, чтобы решить поставленную задачу, нет и быть не может.

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

Решение css only:

/*ПК*/
@media only screen and (min-width: 800px) {
  .container {display: inline-flex; width: 100%;}
  .container>div:nth-child(1) {width: 10%;}
  .container__mobile {width: 90%;}
  .container__mobile {display: inline-flex;}
  .container__mobile>div:nth-child(1) {width: 10%;}
  .container__desktop {display: flex; flex-flow: row wrap; width: 90%;}
  .container__desktop>div:nth-child(1),
  .container__desktop>div:nth-child(2) {width: 50%;}
  .container__desktop>div:nth-child(3) {width: 100%;}
}

/*Мобильное устройство*/
@media only screen and (max-width: 800px) {
  .container {display: inline-flex; width: 100%;}
  .container>div:nth-child(1) {width: 10%;}
  .container__mobile {display: inline-flex; align-items: flex-start; width: 90%;}
  .container__mobile>div:nth-child(1) {display: grid; width: 20%;}
  .container__desktop {display: grid; width: 80%;}
  .container__desktop>div:nth-child(1) {order: -1;}
  .container__desktop>div:nth-child(2) {margin-left: -25%;}
  .container__desktop>div:nth-child(3) {margin-left: -25%; order: -1;}
}

/*Это вам не нужно, текст по цетру*/
* {text-align: center;}

<div class="container">
  <div style="background:#a349a3;">1</div>
<div class="container__mobile"> <!--mobile-->
  <div style="background:#fef200;">2</div>
<div class="container__desktop"><!--desktop-->
  <div style="background:#feaec9;">3</div>
  <div style="background:#b97a57;">4</div>
  <div style="background:#7092bf;">5</div>
</div><!--/mobile-->
</div><!--/desktop-->
</div><!--/container-->

БЛОГ НА HUSL

Размещение блоков div во всё свободное пространство и их перестановка при изменении разрешения экрана

Ответы (1 шт):