Bootstrap 4 引导rowspan和align控件自底向上

我试图创建以下使用引导。左边三行，右边两行。第二列中的第一行rowspan和垂直对齐底部

这是我试过的html代码

<div class="container-fluid">
<div class="row">
    <div class="col">
        <div style='background-color:red'>
                    row1-col1
        </div> 
        <div style='background-color:aqua'> 
                        row2-col1
        </div> 
    </div> 
    <div class="col" style='vertical-align:bottom'> 
            <div style='background-color:yellow'> 
                  row1-col2
            </div>   
    </div>
</div>
<div class="row">
    <div class="col"> 
        <div style='background-color:lightgreen'> 
                   row3-col1
        </div>
    </div> 
    <div class="col">  
        <div  style='background-color:orange'> 
                 row2-col2
        </div>
    </div>
</div>

行1-col1
row2-col1
第1-2行
第3列第1列
row2-col2

这是我得到的实际输出。

---

不知道我错过了什么，非常感谢您的帮助。提前感谢。

我对您提供的代码做了一些更改。我移动了一些样式，并将

.equal

类添加到每个列中

此外，如果您对一个简单、更可靠的自定义JS脚本感兴趣，可以获得所需的高度匹配效果（我不喜欢引导均衡器）

要将此添加到您的row1-col1-row2-col1列和row1-col2列中，请注意：为了使代码正常工作，我必须使用较低版本的jQuery（本例中为2.1.1/您可以测试其他版本，看看哪些版本适合您），并且我对一些HTML进行了洗牌。如果背景颜色仅用于示例，则其所有设置和列高度将匹配

使用您的代码查看此新代码笔：

.equal{
背景剪辑：内容框；
}

行1-col1
row2-col1
第1-2行
第3列第1列
row2-col2

谢谢@brooksrelyt，我可以知道如何将垂直对齐添加到row1-col2吗？太棒了，谢谢，这就是我想要的。