Css 如何在行的底部定位列？

我想将灰色框放在行的底部，如下所示：

我试着通过一些助手类来实现这一点，比如：

.pos-relative{position:relative；}

应用于该行。

.col bottom{位置：绝对；底部：0；}

应用于列

这就是我得到的：

HTML:

---

如果有人能帮我就好了。提前谢谢。

不太清楚重点是什么。你必须把每一行分成两列，你想让黑匣子在第一行的左栏底部居中，还是什么？我在一行中有两列，我想把第一列（黑匣子）放在整行的底部，这将应用第二列（白匣子）的高度。我的任何尝试都会导致列重叠。明白了吗？是的，我明白了。嗯，你可以试着做得更巧妙一点。将黑框放置在第二行，并在顶部设置负边距，这样它将与上一行重叠，看起来就像实际放置的框一样。我想，您仍然需要使用绝对定位来进行此操作。

<div class="row no-gutters pos-relative">
    <div class="col-lg-2 col-lg-offset-2 col-bottom">
        <div class="design-box"></div>
    </div>

    <div class="col-lg-5 col-lg-offset-3">
        <div class="second-box"></div>
    </div>
</div>

.second-box {
    border: 0.1em solid black;
    height: 30em;
}

.pos-relative {
    position: relative;
}

.col-bottom {
    position: absolute;
    bottom: 0;
}