Bootstrap 5超小断点下堆叠列内容右对齐调整需求

• 先理清问题根源：你用的justify-content-*是控制flex容器内元素的排列，但堆叠后的列默认是块级元素，要么得把列改成flex容器，要么直接用文本对齐类，才能控制内容的对齐方向。

• 给你两个直接能用的方案（适配Bootstrap 5；如果是旧版Bootstrap，把text-end换成text-right，text-sm-left换成text-sm-left反向调整即可）：

  1. 文本对齐类方案：给目标列添加 text-end text-sm-left 类。text-end 会让超小断点（xs）下内容右对齐，text-sm-left 则从sm断点开始强制内容左对齐，完全不影响其他断点的布局。
     示例代码：

     <div class="col text-end text-sm-left">
       你的内容在这里
     </div>
     

  2. Flex布局方案：如果你的列内容是用flex布局排列的，先给列加 d-flex 变成flex容器，再添加 justify-content-end justify-content-sm-start 类。这样xs下flex内容右对齐，sm及以上恢复左对齐。
     示例代码：

     <div class="col d-flex justify-content-end justify-content-sm-start">
       你的flex内容在这里
     </div>
     

• 补充说明：之前justify-content-*没用，大概率是因为你没给列加d-flex类——这个属性只对flex容器生效。

内容的提问来源于stack exchange，提问作者user1086516