title: How can I merge 2 flex-box rows in one using flex?
body: <p>How can I get something like this with display:flex?</p>
  <p><a href="https://i.stack.imgur.com/jSULX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jSULX.png" alt="enter image description here" /></a></p>
  <p>Here is my example:
  <div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        * {
              margin: 0;
              box-sizing: border-box;
          }
          .displayflex {
              -ms-box-orient: horizontal;
              display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -moz-flex;
              display: -webkit-flex;
              display: flex;
  
              -webkit-justify-content: space-around;
              justify-content: start;
  
              -webkit-flex-flow: row wrap;
              flex-flow: row wrap;
  
              -webkit-align-items: stretch;
              align-items: stretch;
          }
          .flexbox {
              align-self: auto;
              flex-grow: 0;
              flex-basis: 23%;
  
              margin: 1em 1%;
              height: 5em;
              background-color: #000000;
              color: #FFFFFF;
              padding: 1em;
          }
          .col2 {
              flex-grow: 1;
              flex-basis: 40%;
          }
          .row2 {
              height: 11em;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="displayflex"&gt;
      &lt;div class="flexbox"&gt;1&lt;/div&gt;
      &lt;div class="flexbox"&gt;2&lt;/div&gt;
      &lt;div class="flexbox col2 row2"&gt;3&lt;/div&gt;
      &lt;div class="flexbox col2"&gt;4&lt;/div&gt;
      &lt;div class="flexbox"&gt;5&lt;/div&gt;
      &lt;div class="flexbox"&gt;6&lt;/div&gt;
      &lt;div class="flexbox"&gt;7&lt;/div&gt;
      &lt;div class="flexbox"&gt;8&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Does anybody have a solution?</p>
  <p>The main problem:
  elements is in php foreach and I can send only how many cols and rows current element should cover.</p>
  <p><em>P.S. I know I can use display: grid but it doesn't work correct in all browsers yet.</em></p>
  <p><strong>EDIT:</strong>
  If it's possible I wouldn't change markup</p>