如何在响应式视图中将两列Flex布局显示为单列？

1. 定位布局结构 #

打开浏览器开发者工具（F12），找到教练照片与简介的父容器（类名可能是instructor-row或instructor-wrapper），确认它当前采用的是Flex还是Grid布局——这是调整的核心依据。

2. 添加针对性媒体查询 #

其他页面的代码未生效，大概率是选择器不匹配或优先级不足。直接针对教练模块编写移动端适配规则：

/* 适配手机端，屏幕阈值可根据需求调整 */
@media screen and (max-width: 768px) {
  /* 若父容器为Flex布局，强制改为垂直排列 */
  .instructor-wrapper {
    flex-direction: column !important;
    gap: 1.5rem; /* 增加模块间垂直间距 */
  }
  /* 若父容器为Grid布局，改为单列 */
  .instructor-wrapper {
    grid-template-columns: 1fr !important;
  }
  /* 让照片和简介占满整行宽度 */
  .instructor-photo, .instructor-bio {
    width: 100% !important;
  }
}

3. 排查优先级冲突 #

如果代码仍未生效，在开发者工具的CSS面板中检查是否有其他高优先级样式（如行内样式、ID选择器）覆盖了你的规则。可提升选择器权重，比如用.page-instructors .instructor-wrapper替代.instructor-wrapper，确保适配规则能生效。

4. 清除额外布局干扰 #

若页面存在浮动（float）属性影响布局，在媒体查询中添加以下规则清除浮动：

.instructor-photo, .instructor-bio {
  float: none !important;
}

5. 测试验证 #

切换到浏览器移动端模拟器，刷新页面确认教练照片与简介是否垂直排列为单列。

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