html - Bootstrap 4 Grid System，我无法实现此布局

我可以使用flex和grid在普通CSS中进行此布局，但是我需要知道如何使用bootstrap 4进行​​此布局，没有什么可尝试的。

<div class="row">
<div class="col-sm-3 bg-success" style="height:500px">d</div>
<div class="col-sm-6">
    <div class="row">
        <div class="col-sm-6 bg-primary" style="height:250px">d</div>
        <div class="col-sm-6 bg-info" style="height:500px">d</div>
    </div>
    <div class="row">
        <div class="col-sm-6 bg-info" style="height:250px">z</div>
    </div>
</div>

这就是我需要得到的

最佳答案

请检查工作片段是否对您有帮助

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="row">
<div class="col-sm-4 bg-success" style="height:500px">d</div>
<div class="col-sm-4" style="height:500px">
    <div class="row" style="position:relative;height:500px;">
        <div class="col-sm-12 bg-primary" style="height:200px">d</div>
        <div class="col-sm-12 bg-warning" style="height:200px;position:absolute; bottom:0;">d</div>
    </div>
</div>
<div class="col-sm-4 bg-info" style="height:500px">z</div>

</div>