如何使用Boostrap进行响应式网格设计（放置问题）

Question

我是Bootstrap的新手，如何进行这种布局？

https://ibb.co/F7mv5V6

这是我尝试过的方法，但有误（一定是图片链接）

     <div class="col-12 col-lg-4">A</div>   
     <div class="col-12 col-lg-4">
            <div class="row">
                    <div class="col">X</div>  
                    <div class="col">Y</div>  
            </div>
     </div>   
     <div class="col-12 col-lg-4">B</div>

Answer 1

检查是否有帮助。

.bg{background-color:#f1f1f1; width:100%; height:100%}

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

<div class="grid">
<div class="row">
<div class="col-md-4">
<div class="bg">A</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div class="bg">X</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
<div class="bg">Y</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="bg">B</div>
</div>
</div>
</div>