使一个flexbox行比其他行高

Question

我正在尝试使Bootstrap flexbox行的第一列变为全高。我还标记了其他4列的水平位置。所有的蓝色列都处于正确的位置-我只希望左侧的列为全高或垂直居中，以使文本“左上1/3，全高”在行中垂直居中。

我尝试过的事情：

1. 在第一列上设置margin: auto
2. 在第一列上设置align-self: center或stretch
3. 在行上设置align-items: stretch
4. 在第一列上设置height: 100%

提琴：https://jsfiddle.net/swrobel/5ahwLt8x/

<div class="container">
  <div class="row justify-content-end">
    <div class="col col-4">
      Top Left 1/3, Full height
    </div>
    <div class="col col-4">
      Top Middle 1/3
    </div>
    <div class="col col-4">
      Top Right 1/3
    </div>
    <div class="col col-8">
      Bottom right 2/3
    </div>
  </div>
</div>