html - 1列4列

我正在尝试创建1行中有4列的引导程序布局，但是1列必须在正确的2列之下。

这是我想要的最终结果的屏幕截图：
End result

这是我现在拥有的：
Current situation

因此，黑色列必须位于列下方的右侧。

这是我正在使用的代码：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="home-teams">
    <div class="container">
        <div class="row">
            <div class="col-md-6" style="background-color: green; height: 500px;">
                1
            </div>
            <div class="col-md-3" style="background-color: pink; height: 250px;">
                2
            </div>
            <div class="col-md-3" style="background-color: yellow; height: 250px;">
                3
            </div>
            <div style="background-color: black; height: 250px; width: 50%;">
                4
            </div>
        </div>
    </div>
</div>

谢谢你的时间！

最佳答案

使用以下代码（您可以使用bootstrap-4间距来分隔空格）：
参见小提琴：

关于html - 1列4列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51493677/