列中使用d-flex等flexbox类时如何让p标签内容显示在h1下方

flex容器默认主轴为水平方向（flex-direction: row），所以内部直接子元素会默认横向并排排列，不会自动上下堆叠。

优先推荐修改flex容器的主轴方向为垂直，仅需给容器新增flex-column类即可：

<div class="col d-flex flex-column align-items-center justify-content-left">
 <h1>App Name</h1>
 <p>Content em desenvolvimento</p>
</div>

补充说明 #

• 添加flex-column后，flex主轴变为垂直方向：justify-content-*类控制垂直方向的对齐逻辑，align-items-*类控制水平方向的对齐逻辑。如果需要p和h1水平左对齐，可将align-items-center替换为align-items-start。
• 若不想修改容器主轴方向，也可以给容器添加flex-wrap类开启换行，同时给p标签添加w-100类使其占满整行，同样可以实现上下排列的效果：

<div class="col d-flex flex-wrap align-items-center justify-content-left">
 <h1>App Name</h1>
 <p class="w-100">Content em desenvolvimento</p>
</div>

内容的提问来源于stack exchange，提问作者João Carlos