在摺疊引導行上垂直對齊內容

Question

我在一行中有兩列，兩列也都包含一行。如果頁面寬度達到'xs'中斷點，則左列的行將堆疊爲彼此頂部的列。

右列的高度大於左列的高度。這導致左列底部有很多空的空間。

我想將左列分散在右欄創建的可用空間上的堆積列。

Bootstrap4的類justify-content-between和css屬性justify-content: space-between;似乎是一個很好的選擇，但我不知道如何在這種情況下使用它們。

幫助將不勝感激，謝謝！

小提琴here及以下片段：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 

 
    <!-- left column --> 
 
    <div class="col-6"> 
 
     <div class="row"> 
 
     <div class="col-12 col-md-4">column 1</div> 
 
     <div class="col-12 col-md-4">column 2</div> 
 
     <div class="col-12 col-md-4">column 3</div> 
 
     </div> 
 
    </div> 
 

 
    <!-- right column --> 
 
    <div class="col-6"> 
 
     <div class="row"> 
 
     <div class="col-12"> 
 
      <p> 
 
      imagine this col was really tall, and I wish the columns one, two, and three from the left col would justify between themselves to match the overall height of this column 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

添加d-flex類第一col-6 - 見下面的演示和updated jsfiddle：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 

 
    <!-- left column --> 
 
    <div class="col-6 d-flex"> 
 
     <div class="row"> 
 
     <div class="col-12 col-md-4">column 1</div> 
 
     <div class="col-12 col-md-4">column 2</div> 
 
     <div class="col-12 col-md-4">column 3</div> 
 
     </div> 
 
    </div> 
 

 
    <!-- right column --> 
 
    <div class="col-6"> 
 
     <div class="row"> 
 
     <div class="col-12"> 
 
      <p> 
 
      imagine this col was really tall, and I wish the columns one, two, and three from the left col would justify between themselves to match the overall height of this column 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>