Перетащите гибкий элемент на следующую строку, чтобы следующие элементы продолжали выполнение

Question

Я хочу, чтобы красное поле находилось во 2-й строке, но затем я хочу, чтобы элементы div, определенные после него, продолжались в первой строке, так что все черные коробки по существу обертывают черный ящик. Можно ли это сделать с помощью flexbox?

Это должно выглядеть так:

+---+---+---+---+---+
| 1 | 2 | 3 | 5 | 6 |
+---+---+---+---+---+
|         4         |
+---+---+---+---+---+
| 7 | 8 | 9 |10 |11 |
+---+---+---+---+---+
|12 |13 |
+---+---+

* {
  box-sizing: border-box;
}

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

.a {
  border: 1px solid black;
  height: 50px;
  width: 20%;
}

.b {
  border: 1px solid red;
  height: 50px;
  width: 100%;
}

<div class="container">
  <div class='a'>1</div>
  <div class='a'>2</div>
  <div class='a'>3</div>
  <div class='b'>4</div>
  <div class='a'>5</div>
  <div class='a'>6</div>
  <div class='a'>7</div>
  <div class='a'>8</div>
  <div class='a'>9</div>
  <div class='a'>10</div>
  <div class='a'>11</div>
  <div class='a'>12</div>
  <div class='a'>13</div>
</div>

См. https://codepen.io/anon/pen/OqqeJN

Answer 1

Вам больше повезет, используя CSS-сетку для этой задачи:

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: dense; /* this will make the elements to flow around*/
}

.a {
  border: 1px solid black;
  height: 50px;
}

.b {
  border: 1px solid red;
  height: 50px;
  /*full width row*/
  grid-column: 1/-1;
}

<div class="container">
  <div class='a'>1</div>
  <div class='a'>2</div>
  <div class='a'>3</div>
  <div class='b'>4</div>
  <div class='a'>5</div>
  <div class='a'>6</div>
  <div class='a'>7</div>
  <div class='a'>8</div>
  <div class='a'>9</div>
  <div class='a'>10</div>
  <div class='a'>11</div>
  <div class='a'>12</div>
  <div class='a'>13</div>
</div>

плотного

Если указано, алгоритм автоматического размещения использует «плотный» алгоритм упаковки, который пытается заполните отверстия ранее в сетке, если более мелкие элементы появятся позже .Это может привести к тому, что элементы будут отображаться не по порядку, при этом будут заполнены отверстия, оставленные более крупными элементами. ^ref

Answer 2

Вы можете использовать свойство order вместе с псевдоклассом nth-child().

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

.a {
  flex: 0 0 20%;
  border: 1px solid black;
}

.b {
  flex: 0 0 100%;
  border: 1px solid red;
}

.a:nth-child(1) { order: -5; }
.a:nth-child(2) { order: -4; }
.a:nth-child(3) { order: -3; }
.a:nth-child(5) { order: -2; }
.a:nth-child(6) { order: -1; }
/* the default value all items is 0 */

.container > div {
  height: 50px;
}

* {
  box-sizing: border-box;
}

<div class="container">
  <div class='a'>1</div>
  <div class='a'>2</div>
  <div class='a'>3</div>
  <div class='b'>4</div>
  <div class='a'>5</div>
  <div class='a'>6</div>
  <div class='a'>7</div>
  <div class='a'>8</div>
  <div class='a'>9</div>
  <div class='a'>10</div>
  <div class='a'>11</div>
  <div class='a'>12</div>
  <div class='a'>13</div>
</div>