强制引导程序忽略较大的列高

Question

有什么方法可以强制 Bootstrap 使第二行的第一列位于前一行中相应列的高度下方？

目前发生的情况是每行都采用最大列的高度。

<div class="container">
   <div class="row">
      <div class="col-4" style="background-color: #f8d7da; height: 100px;">
        First col
      </div>
      <div class="col-4" style="background-color: #d4edda; height: 400px;">
        Second col
      </div>
      <div class="col-4" style="background-color: #cce5ff; height: 300px;">
        Thirth col
      </div>
      <div class="col-4" style="background-color: #a8c4da;">
        Fourth col
      </div>
  </div>
</div>

顺便说一句，我的意思是“行”的概念，而不是标签。只有一个< div class="row" >

Answer 1

试试这个

<div class="container">
  <div class="container">
    <div class="row">
      <div class="sm-4 col-4">     
        <div class="row">
          <div class=" sm-4 col-4" style="background-color: #f8d7da; height: 100px;">
            First col
          </div>
       </div>
       <div class="row">
         <div class="col-4" style="background-color: #a8c4da;">
           Fourth col
         </div>
       </div>
     </div>
     <div class="col-4" style="background-color: #d4edda; height: 400px;">
        Second col
     </div>
     <div class="col-4" style="background-color: #cce5ff; height: 300px;">
        Thirth col
     </div>      
  </div>
 </div>
</div>