Как изменить порядок сгибания при изменении размера окна?

Question

Пожалуйста, помогите мне смоделировать это в CSS. У меня есть три компонента, как показано ниже.

Когда ширина окна уменьшается ниже 1000 пикселей. Порядок изгиба должен измениться, как показано на следующем рисунке.

Answer 1

Вам нужен основной контейнер, который содержит каждые три компонента. Таким образом, ваш HTML должен быть организован следующим образом:

<div class="main-container">
   <div class="component1"></div>
   <div class="component2"></div>
   <div class="component3"></div>
</div>

и CSS:

.main-component {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.component1, 
.component2 {
  width: 50%;
  height: 50px;
}

.component3 {
  width: 100%;
  height: 50px;
}

@media(max-width: 1000px)
{
  .component1,
  .component2 {
    width: 100%;
  }
}

.main-component - это наш flex-box. Компоненты 1 и 2 остаются рядом, потому что они имеют width: 50%. Компонент 3 остается ниже, потому что он имеет width: 100%. Медиа-запрос max-width: 1000px предоставляет изменение порядка изгиба, когда ширина окна уменьшается ниже 1000 пикселей.

рабочая демонстрация здесь: https://jsfiddle.net/hfkcdv1t/