如何让小屏水平的list-group在中等及以上设备转为垂直显示？

你当前使用list-group-horizontal-sm类的作用是从sm（≥576px）断点开始让列表保持水平排列，因此md、lg等更大尺寸设备也会沿用这个水平样式。要实现「小屏水平，中等及以上（md≥768px）垂直」的效果，需要在md及以上断点覆盖水平布局的样式，以下是两种可行方案：

方法一：使用Bootstrap原生响应式flex类 #

直接利用Bootstrap内置的flex-md-column类，在md及以上屏幕将列表的flex方向改为垂直，无需额外编写CSS：

修改后的完整代码：

<div class="col d-flex justify-content-center col-12 col-md-2">
    <ul class="list-unstyled list-group-horizontal-sm list-group flex-md-column">
        <li class="list-group-item">
            <img class="img-fluid" src="Screenshot from 2024-10-26 11-01-44.png" style="width: 47px;" />
        </li>
        <li class="list-group-item">
            <img class="img-fluid" src="Screenshot from 2024-10-26 11-01-44.png" style="width: 47px;" />
        </li>
        <li class="list-group-item">
            <img class="img-fluid" src="Screenshot from 2024-10-26 11-01-44.png" style="width: 47px;" />
        </li>
    </ul>
</div>

说明：

• flex-md-column：在md及以上屏幕强制设置flex-direction: column，直接覆盖list-group-horizontal-sm的水平布局规则
• 给<li>添加list-group-item类，确保Bootstrap的列表组样式正确生效（原代码缺失该类，可能导致样式异常）

方法二：自定义CSS媒体查询 #

如果更倾向于通过自定义样式控制，可以添加媒体查询针对md及以上屏幕调整布局：

首先添加CSS代码：

/* 针对md及以上屏幕，将列表改为垂直排列 */
@media (min-width: 768px) {
  .list-group-horizontal-sm.md-vertical {
    flex-direction: column;
  }
  /* 可选：给垂直排列的列表项添加间距 */
  .list-group-horizontal-sm.md-vertical .list-group-item {
    margin-bottom: 0.5rem;
  }
}

然后给<ul>添加自定义类md-vertical：

<ul class="list-unstyled list-group-horizontal-sm list-group md-vertical">

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