如何实现指定布局的Responsive Section？解决移动端布局错误

你的核心问题是移动端时数字容器没有保持横向排列，而是默认垂直堆叠了。下面用两种常用方案实现你要的布局：

方案一：Flexbox 实现 #

HTML 结构 #

<section class="layout-container">
  <div class="numbers-wrapper">
    <div class="num-box">3</div>
    <div class="num-box">2</div>
    <div class="num-box">1</div>
  </div>
  <div class="letter-box">A</div>
</section>

CSS 样式 #

/* 桌面端基础样式 */
.layout-container {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.numbers-wrapper {
  display: flex;
  gap: 1rem;
}

.num-box, .letter-box {
  padding: 1.5rem;
  border: 1px solid #333;
}

.letter-box {
  flex: 1; /* 让A占据剩余所有宽度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 移动端适配（768px 以下） */
@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }

  .numbers-wrapper {
    width: 100%;
    justify-content: space-evenly; /* 数字均匀分布 */
  }

  .letter-box {
    width: 100%;
  }
}

方案二：CSS Grid 实现 #

HTML 结构和上面一致，CSS 样式如下 #

/* 桌面端基础样式 */
.layout-container {
  display: grid;
  grid-template-columns: repeat(3, auto) 1fr;
  gap: 1rem;
}

.num-box, .letter-box {
  padding: 1.5rem;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .layout-container {
    grid-template-columns: 1fr;
  }

  .letter-box {
    grid-row: 1; /* 强制A排在第一行 */
  }

  .numbers-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    grid-column: 1; /* 占满整列宽度 */
  }
}

错误原因说明 #

你之前的实现应该是没给移动端的数字容器设置横向布局规则，默认块级元素会让内部数字项垂直堆叠。上面两种方案都确保了在移动端时，数字容器依然保持横向排列的布局，同时调整外层容器的方向/网格结构，实现你要的响应式效果。

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