响应式页面div内元素重排：小屏如何按左中右顺序垂直排列

原布局出现错乱是因为小屏宽度下，三个inline-block元素的宽度+左右边距之和超过了父容器宽度，导致元素错位换行。你可以通过CSS媒体查询实现小屏端的元素重排效果，不需要修改HTML结构，仅需调整CSS代码即可，兼容React框架使用场景。

方案1：基于现有inline-block逻辑最小修改 #

直接在现有CSS末尾添加移动端适配的媒体查询，修改小屏下三个元素的宽度、margin和显示模式，断点值可根据业务需求自行调整：

/* 屏幕宽度小于768px时触发适配 */
@media (max-width: 768px) {
  .left, .center, .right {
    /* 占满整行宽度 */
    width: 100%;
    /* 取消原有左右边距，改为上下边距分隔元素 */
    margin: 0 0 10px 0;
    /* 块级元素自动独占一行 */
    display: block;
  }
  /* 可选：调整分隔符在移动端的间距避免留白过大 */
  .separator {
    margin-top: 20px;
    margin-bottom: 10px;
  }
}

方案2：替换为Flex布局（更灵活易维护，推荐React项目使用） #

如果允许调整原有布局逻辑，改用Flex布局能更方便控制对齐、间距和响应式行为，修改后的完整CSS如下：

#wrap {
  margin: 20px auto;
  width: 80%;
  /* 新增Flex布局基础配置 */
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 统一控制元素间距，替代原有零散margin配置 */
}

.separator { 
  /* 分隔符默认占满整行 */
  width: 100%;
  margin-top: 20px;
}

.left,
.right {
  height: 30px; 
  line-height: 30px;
  text-align: center;
  background-color: grey;
  /* 桌面端宽度自适应占比 */
  flex: 1 1 30%;
}

.center {
  min-height: 30px; 
  line-height: 30px;
  text-align: center;
  background-color: blue;
  flex: 1 1 30%;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .left, .center, .right {
    /* 每个元素占满整行，自动垂直排列，顺序和HTML结构保持一致 */
    flex: 1 1 100%;
  }
}

React项目适配说明 #

如果你的React项目使用CSS Modules、Styled Components、Tailwind CSS等样式方案，适配逻辑完全一致：

• CSS Modules：直接将上述媒体查询写在对应的.module.css文件中即可
• Styled Components：可以将媒体查询逻辑封装到样式组件内部
• Tailwind CSS：直接使用md:flex-row flex-col等内置响应式类即可快速实现效果

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