设置flex的order属性调整div顺序不生效，如何实现响应式布局重排？

问题根源 #

• order属性仅对弹性容器（display:flex/inline-flex）的直接子元素生效，你给非直接子元素#st-line设置的order完全无效
• 小屏场景下#main-heading残留float:left属性，且默认大屏场景下#main-page未设置为弹性容器，小屏切换为弹性布局后原有浮动属性可能引发布局异常
• 你将小屏下的#main-page设置为position:fixed会导致容器脱离正常文档流，内容溢出时无法滚动，不符合常规页面布局需求

修复后的完整代码 #

CSS代码

/* 大屏默认布局 */
#main-page {
  position: relative;
  margin-left: 25vw;
  display: flex;
  flex-wrap: wrap; /* 允许换行，实现第一行放标题和描述，第二行放菜单 */
}

#main-heading {
  padding: 70px 20px 0px 0px;
  font-size: 48px;
  font-family: DM Serif Display;
  width: 35vw;
  height: 33vh;
  overflow: hidden;
}

#main-description {
  overflow: hidden;
  padding: 100px 10vw 0 80px;
  height: 33vh;
  width: 180px;
  color: gray;
}

#st-line {
  border: none;
  width: 50px;
  margin-left: 0px;
  height: 2px;
  background-color: #F34650;
}

#main-menu {
  background-color: white;
  height: 50vh;
  width: 100%; /* 占满整行，实现换行效果 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

div>.menu-items {
  height: 25vh;
  padding: 25px 25px 5px 25px;
  border-radius: 20px;
  box-shadow: -2px 8px 20px 1px rgb(0 0 0/0.2);
}

@media (max-width:1040px) {
  #main-page {
    margin-left: 5vw;
    flex-flow: column;
    z-index: 1;
    position: relative; /* 移除fixed避免滚动异常 */
  }
  #main-heading {
    margin: 0;
    height: 25vh;
    padding: 80px 30px 0px 0px;
    width: 90vw;
    overflow: hidden;
    order: 1;
    font-size: 44px;
  }
  #main-menu {
    display: flex;
    flex-direction: row;
    order: 2;
    width: 90vw;
  }
  #main-description {
    overflow: hidden;
    padding: 20px 0px 20px 20px;
    height: 100%;
    width: 180px;
    order: 3;
  }
  div>.menu-items {
    height: 25vh;
    padding: 25px 25px 5px 25px;
    border-radius: 20px;
    box-shadow: -2px 8px 20px 1px rgb(0 0 0/0.2);
  }
}

HTML代码（无需修改）

<div id="main-page">
  <div id="main-heading">Main Heading</div>
  <div id="main-description">Description
    <hr id="st-line">
  </div>
  <div id="main-menu">
    <div id="menu-div1" class="menu-items">item1</div>
    <div id="menu-div2" class="menu-items">item2</div>
    <div id="menu-div3" class="menu-items">item3</div>
    <div id="menu-div4" class="menu-items">item4</div>
    <div id="menu-div5" class="menu-items">item5</div>
  </div>
</div>

核心修改说明 #

• 大屏场景下将#main-page设置为display:flex配合flex-wrap:wrap，替代原有float布局，适配弹性布局的order属性切换逻辑
• 移除小屏场景下#main-page的position:fixed属性，避免页面内容无法滚动
• 清除多余的#st-lineorder属性设置，该元素为#main-description的子元素，不需要单独调整顺序
• 给大屏下的#main-menu设置width:100%，确保菜单独占第二行，符合原始布局需求

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