在折叠引导行上垂直对齐内容

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>