如何使用flex合并2个flex-box行？

Question

我怎么能用display：flex？

来得到这样的东西

这是我的例子：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

有人有解决方案吗？

主要问题： 元素在php foreach中，我只能发送当前元素应覆盖的cols和row的数量。

P.S。我知道我可以使用display：grid但它在所有浏览器中都无法正常工作。

修改 如果可能，我不会改变标记