How can I merge 2 flex-box rows in one using flex?

Question

How can I get something like this with display:flex?

Here is my example:

        * {
            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;
        }

<div class="displayflex">
    <div class="flexbox">1</div>
    <div class="flexbox">2</div>
    <div class="flexbox col2 row2">3</div>
    <div class="flexbox col2">4</div>
    <div class="flexbox">5</div>
    <div class="flexbox">6</div>
    <div class="flexbox">7</div>
    <div class="flexbox">8</div>
</div>

Does anybody have a solution?

The main problem: elements is in php foreach and I can send only how many cols and rows current element should cover.

P.S. I know I can use display: grid but it doesn't work correct in all browsers yet.

EDIT: If it's possible I wouldn't change markup