Bootstrap 5移动端将row转为带横向滚动的flex-row，保留桌面布局

不需要JS，也不用重复加载图片，直接复用原有row/col结构就能实现需求。

实现步骤 #

假设你的桌面端基础代码是这样的：

<div class="row image-grid">
  <div class="col-md-4 col-sm-6">
    <img src="image1.jpg" alt="图1">
  </div>
  <div class="col-md-4 col-sm-6">
    <img src="image2.jpg" alt="图2">
  </div>
  <div class="col-md-4 col-sm-6">
    <img src="image3.jpg" alt="图3">
  </div>
  <!-- 更多图片列 -->
</div>

添加下面的自定义CSS，直接覆盖移动端的布局行为：

/* 针对Bootstrap的xs移动端断点（<576px） */
@media (max-width: 575.98px) {
  .image-grid {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 10px; /* 给滚动条留足空间 */
    /* 可选：隐藏滚动条但保留滚动功能 */
    /* -ms-overflow-style: none;
    scrollbar-width: none; */
  }

  .image-grid .col-md-4,
  .image-grid .col-sm-6 {
    flex: 0 0 auto;
    width: 80%; /* 自定义移动端单图宽度，按需调整 */
    margin-right: 15px; /* 图片之间的间距 */
  }

  /* 可选：隐藏Chrome等webkit内核的滚动条 */
  /* .image-grid::-webkit-scrollbar {
    display: none;
  } */
}

方案优势 #

• 零重复资源：完全复用原有DOM结构，不会出现图片重复加载的问题
• 贴合Bootstrap逻辑：用框架默认的断点值，和原生响应式行为保持一致
• 无JS依赖：纯CSS实现，性能更好，也不用处理窗口 resize 的监听逻辑

备选JS方案（仅特殊场景用） #

如果因为某些复杂布局限制必须切换类名，也不用复制图片，只需要动态修改容器的类：

function updateImageLayout() {
  const grid = document.querySelector('.image-grid');
  const isMobile = window.innerWidth <= 575.98;
  grid.classList.toggle('flex-scroll-row', isMobile);
  grid.classList.toggle('row', !isMobile);
}

// 初始化执行
updateImageLayout();
// 窗口大小变化时更新
window.addEventListener('resize', updateImageLayout);

配套CSS：

.flex-scroll-row {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.flex-scroll-row > div {
  flex: 0 0 auto;
  width: 80%;
  margin-right: 15px;
}

这个方案同样只用一套DOM，不会重复加载图片。

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