Можно ли вытащить гибкий элемент в середине и растянуть его до 100% ширины в качестве вторичной строки в HTML при изменении размера?

Question

Можно ли вытащить гибкий элемент посередине и растянуть его до 100% ширины во второй строке в HTML при изменении размера?

У меня есть следующие flex-предметы, завернутые в flex-box

Item-A Item-B Item-C Item-D Item-E Item-E

<div class="d-flex flex-wrap">
  <div>Item-A</div>
  <div>Item-B</div>
  <div>Item-C</div>
  <div>Item-D</div>
  <div>Item-E</Div>
</div>

На небольших устройствах я хочу, чтобы Item-B был извлечен из ряда и отображен как второй ряд, но внутри родительского контейнера. Можно ли сделать с CSS flex?

Примечание. Я использую загрузчик в качестве фреймворка CSS

Answer 1

Вы можете использовать order и медиа-запросы для достижения результатов.

* {
    box-sizing: border-box;
}
.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  border: solid 1px black;
  width: 25%;
}

.item3 {
  order: 5;
  width: 100%;
  flex-shrink: 0;
  flex-grow: 1;
}

.item4 {
  order: 3;
}

.item5 {
  order: 4;
}
  
@media only screen and (min-width: 600px) {
  .container {
    flex-wrap: no-wrap;
  }
  
  .item3 {
    order: 3;
    flex-grow: 0;
  }
  
  .item4 {
    order: 4;
  }
  
  .item5 {
    order: 5;
  }
}

<div class="container">
  <div class="item1">Item1</div>
  <div class="item2">Item2</div>
  <div class="item3">Item3</div>
  <div class="item4">Item4</div>
  <div class="item5">Item5</div>
</div>

Answer 2

Используйте flex-basis: 100%, чтобы сделать ваш элемент полной ширины, и order: 1, чтобы поместить его после всех других элементов в контейнере. В приведенном ниже фрагменте я установил это на устройствах размером менее 500 пикселей:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1;
  outline: 1px dashed tomato;
  text-align: center;
}

@media only screen and (max-width: 500px) {
  .item-b {
    flex-basis: 100%;
    order: 1;
  }
}

<div class="flex-container">
  <div class="item item-a">a</div>
  <div class="item item-b">b</div>
  <div class="item item-c">c</div>
  <div class="item item-d">d</div>
  <div class="item item-e">e</div>
</div>