Возможно ли изменить порядок вывода вложенных блоков?

Question

Есть три блока, причем второй и третий объединены (возможно в этом проблема).

<div class="row">
  <div class="col-12 col-md-8">
    <div class="a">
      A
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="b">
      B
    </div>
    <div class="c">
      C
    </div>
  </div>
</div>

При разных разрешениях получаю результат

Вопрос: Можно ли изменить стили или верстку, чтобы на мобильных устройствах блок А оказывался между блоками В и С

Answer 1

В общем случае, для данного набора элементов решение может выглядеть так:

Задаем основному контейнеру свойство display:flex, чтобы управлять порядком его дочерних элементов через св-во order
Убираем обертку B и С из дерева доступности, свойством display: contents — теперь его наследники становятся дочерними элементами основного контейнера
Ставим элемент В первым по порядку при помощи отрицательного значения order:-1

.row {
  display: flex;
  flex-direction: column;
}

.col-12.col-md-4 {
  display: contents;
}

.b {
  order: -1;
}

<div class="row">
  <div class="col-12 col-md-8">
    <div class="a">
      A
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="b">
      B
    </div>
    <div class="c">
      C
    </div>
  </div>
</div>

БЛОГ НА HUSL

Возможно ли изменить порядок вывода вложенных блоков?

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