Bootstrap 4 引导-div内的行，且资源中心未垂直放置在每行之后？

下面是我的html代码

<div class="row mt-2 justify-content-center">
    <div class="row">
        <figure>
            <img src="../img/dummy.jpg" class="rounded" />
            <figcaption class="text-center"><h3>Title</h3></figcaption>
        </figure>
    </div>
    <div class="row">
        <button type="button" class="btn btn-sm btn-outline-primary">Button 1</button>
    </div>
    <div class="row">
        <button type="button" class="btn btn-sm btn-outline-primary">Button 2</button>
    </div>
</div>

标题
按钮1
按钮2

这就是输出

---

如何使按钮位于下图下方？

尝试在父级

div

@T0ny1234上添加

flex column

，添加flex column使按钮向下移动，但内容不再居中对齐，所有内容都向左移动。