Bootstrap 4 如何使用bootstrap responsive flex column实现垂直对齐？

在屏幕尺寸小于576px后，如何使文本标题“最新消息”位于“新”图标下方？我曾尝试使用bootstrap flex column进行响应，但多次失败。请帮忙

这是我的密码

<div class="latest-news">
    <div class="title d-flex justify-content-center align-items-center">
        <img class="icon01 px-2" src="img/title-icon01.png">
        <span class="title01 px-2">Latest news</span>
    </div>
</div>

最新消息

我们可以使用flex列和flex sm行来满足您的要求

flex-column

将文本置于图标下方（适用于所有屏幕大小）

flex sm row

将把文本放在图标旁边（对于大于sm断点（576px）的所有屏幕大小）

最新消息

如果您想了解更多有关引导式响应设计的信息，那么他们的文档是一个很好的起点。此链接显示flex列的说明：

---

谢谢！结果很好。好的，我将查看他们的网站并进行更多练习：）

<div class="latest-news">
    <div class="title d-flex flex-column flex-sm-row justify-content-center align-items-center">
        <img class="icon01 px-2" src="img/title-icon01.png">
        <span class="title01 px-2">Latest news</span>
    </div>
</div>