Bootstrap 4嵌套行等高布局求助：响应式展示适配问题

嘿，这个问题我之前也碰到过——既要保证移动端的内容顺序逻辑通顺，又要让桌面端的子主题完美对齐，确实有点棘手！不过有两种靠谱的解决方案，你可以试试：

Grid 布局天生适合这种需要跨屏幕调整元素位置和尺寸的场景，能完美兼顾两种端的需求。

调整后的 HTML 结构 #

<div class="container-fluid">
  <div class="grid-layout">
    <!-- 主题1 -->
    <div class="item topic-1">
      <h1>Topic 1</h1>
      <p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
    </div>
    <!-- 主题2 -->
    <div class="item topic-2">
      <h1>Topic 2</h1>
      <p>Two lines of text<br>Line2</p>
    </div>
    <!-- 子主题1 -->
    <div class="item subtopic-1">
      <h2>Subtopic 1</h2>
      <p>Number of lines<br>do not matter</p>
    </div>
    <!-- 子主题2 -->
    <div class="item subtopic-2">
      <h2>Subtopic 2</h2>
      <p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=md<br>and when <md, Subtopic 1 shold be below Topic 1, not below Topic 2</p>
    </div>
  </div>
</div>

配套 CSS 样式 #

.grid-layout {
  display: grid;
  gap: 1.5rem; /* 元素间的间距，可按需调整 */
}

/* 移动端：单列展示，严格遵循 Topic1 → Subtopic1 → Topic2 → Subtopic2 的顺序 */
@media (max-width: 767px) {
  .grid-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topic1"
      "sub1"
      "topic2"
      "sub2";
  }
  .topic-1 { grid-area: topic1; }
  .subtopic-1 { grid-area: sub1; }
  .topic-2 { grid-area: topic2; }
  .subtopic-2 { grid-area: sub2; }
}

/* 桌面端：两列两行，子主题自动垂直对齐 */
@media (min-width: 768px) {
  .grid-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr; /* 第一行自适应主题高度，第二行占满剩余空间 */
    grid-template-areas:
      "topic1 topic2"
      "sub1 sub2";
  }
  .topic-1 { grid-area: topic1; }
  .topic-2 { grid-area: topic2; }
  .subtopic-1 { grid-area: sub1; }
  .subtopic-2 { grid-area: sub2; }
}

原理很简单：桌面端通过 grid-template-rows: auto 1fr 让子主题所在的行自动等高，自然实现垂直对齐；移动端用 grid-template-areas 直接指定元素顺序，完全符合需求。

如果你不想引入 Grid，用 Bootstrap 自带的 Flex 工具类也能搞定，核心思路是让每个主题容器垂直排列，把子主题推到容器底部。

调整后的 HTML 结构 #

<div class="container-fluid">
  <div class="row">
    <!-- 主题1 + 子主题1 容器 -->
    <div class="col-md-6 d-flex flex-column">
      <div class="topic-wrap">
        <h1>Topic 1</h1>
        <p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
      </div>
      <div class="subtopic-wrap mt-auto">
        <h2>Subtopic 1</h2>
        <p>Number of lines<br>do not matter</p>
      </div>
    </div>
    <!-- 主题2 + 子主题2 容器 -->
    <div class="col-md-6 d-flex flex-column">
      <div class="topic-wrap">
        <h1>Topic 2</h1>
        <p>Two lines of text<br>Line2</p>
      </div>
      <div class="subtopic-wrap mt-auto">
        <h2>Subtopic 2</h2>
        <p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=md<br>and when <md, Subtopic 1 shold be below Topic 1, not below Topic 2</p>
      </div>
    </div>
  </div>
</div>

可选的间距优化 CSS #

/* 移动端主题和子主题之间的间距 */
@media (max-width: 767px) {
  .topic-wrap {
    margin-bottom: 1.5rem;
  }
}

这个方案的关键是 d-flex flex-column 让每个列变成垂直 Flex 容器，mt-auto 会把子主题容器自动推到容器底部——不管主题内容有多高，两个子主题都会在同一水平线上对齐，移动端的顺序也完全符合要求。

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