Bootstrap4-如何使嵌套行中的卡伸展以匹配下一行？

Question

尝试将某些卡片包装成相当复杂的布局。右侧的元素即卡片。

到目前为止我所拥有的 https://jsfiddle.net/shifterofbits/ojgtmn80/5/

在屏幕快照模型和小提琴中，“框2和框3”组件如下所示：

 <div class="col-md-8 mb-3">
      <div class="row">
        <div class="card"  style="height:235px">
            <div class="card-header">
                box 2
            </div>          
          <div class="card-body">
            <h3 class="card-title">Title 2</h3>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.
            With supporting text below as a natural lead-in to additional content.
            </p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        </div>
        <div class="row">
        <div class="card"  style="height:235px">
            <div class="card-header">
                box 3
            </div>          
          <div class="card-body">
            <h3 class="card-title">Title here</h3>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.
            With supporting text below as a natural lead-in to additional content.
            </p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>      
        </div>
      </div>

这里是我试图到达的布局类型的模型。 注意右侧，所有内容都对齐。

Answer 1

    框2标题2以下是带有辅助文字的引人注目的自然引语。在下面提供支持文字，自然而然地引入了其他内容。

移至某处3标题在此处，下面的支持文字是对其他内容的自然介绍。在下面提供支持文字，自然而然地引入了其他内容。

去某个地方