在彼此之间的两列Bootstrap4和flex-box

Question

我想一行三列，所以我在大屏幕上做到了这一点（col-lg）

<div class="row">
   <div class="col-lg-3 col-md-4">
   <div class="col-lg-6 col-md-8">
   <div class="col-lg-3 col-md-4">
</div>

但是在中等大小的屏幕（col-md）中，我想在右边有第二个col，在彼此之间有第一个和last-col，如下所示：

我得到的结果是不同的。就像这样：

那我该如何将col-first和col-last放在彼此的正下方，如第二张图片？