html - 1 行 4 列

Question

我正在尝试创建 1 行 4 列的 Bootstrap 布局，但 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>

感谢您的宝贵时间!

Answer 1

使用代码如下(可以使用bootstrap-4 spacing to sapces):

参见 fiddle :https://jsfiddle.net/hm0z5od9/9/

<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-6">
                <div class="row ml-md-1">
                    <div class="col-md-6" style="background-color: pink; height: 250px;">
                        2
                    </div>
                    <div class="col-md-6" style="background-color: yellow; height: 250px;">
                        3
                    </div>
                    <div class="col-md-12 mt-2 p-0">
                        <div style="background-color: black; height: 250px;">
                            4
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>