Flexbox（Bootstrap 4.2）堆叠的网格布局（如float：左）

Question

我正在使用Bootstrap 4.2为Wordpress主题中的博客文章列表创建相对简单的网格布局。

我有一张身高加倍的卡，我想在其右侧“浮动”另外两张单身卡。

在使用flex之前，我会使用浮点数进行此操作，但是现在我找不到如何将两个div堆叠到一个较大的div右侧的答案。

注意事项：我希望我的盒子以4：3的比例响应显示，所以固定高度的解决方案将不起作用。

我看了很多其他页面并回答了类似的问题，但似乎没有人找到一种在不指定固定高度的情况下使用flex进行修复的方法。

以下是显示我要实现的功能（左侧）和显示的内容（右侧）的图：

Answer 1

可以使用CSS网格制作此模板：

.boxes_container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(6, 1fr);
        
        /* The container can be any size, fixed or not */
        width: 300px;
        height: 400px; 
    }

    .box{
        border: solid 1px red;
        margin: 5px;
        
        /* Just to align text : */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box:first-child{
        grid-column:1/4;
        grid-row:1/3;
    }

    .box:nth-child(5){
        grid-column:1/3;
        grid-row:4/6;
    }

    .box:nth-child(9){
        grid-column:2/4;
    }

<div class="boxes_container">
     <div class="box">
         Featured
     </div>
     <div class="box">1</div>
     <div class="box">2</div>
     <div class="box">3</div>
     <div class="box">4</div>
     <div class="box">5</div>
     <div class="box">6</div>
     <div class="box">7</div>
     <div class="box">8</div>
</div>