Bootstrap列布局适配求助：移动端如何将行列转为单列垂直排列？

不用修改HTML结构，用一段简单的CSS代码就能实现你要的效果，步骤如下：

1. 保留你原来的表格HTML代码不变，不用改成移动端的那种结构，CSS会帮你自动调整显示方式。
2. 在Bootstrap Studio的CSS编辑器里，添加这段代码：

/* 当屏幕宽度小于768px（手机尺寸）时生效 */
@media (max-width: 767px) {
  /* 隐藏空表头 */
  .s-table thead {
    display: none;
  }
  /* 把原表格的每一行变成独立块 */
  .s-table tbody tr {
    display: block;
    margin-bottom: 15px; /* 给每行加间距，排版更清爽 */
  }
  /* 让每个单元格占满屏幕宽度，单独成一行 */
  .s-table tbody td {
    display: block;
    width: 100%;
  }
}

3. 保存后切换到移动端预览模式，就能看到效果：原来的两列内容会自动变成一列，每个图片和文字都单独占一行。

简单来说，这段代码是告诉浏览器：当屏幕窄到手机大小的时候，就把表格的行和单元格重新排版，让每个内容块单独占满一行，不用手动改HTML结构。

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