CSS flex布局order属性设置后元素位置未生效问题咨询

核心疑问解答 #

• order属性没有强制要求必须设置在绑定类/ID的选择器上：只要选择器可以准确命中目标元素，类、ID、结构伪类、属性选择器等写法都合法。
• order生效的两个必要条件：
  1. 目标元素的直接父元素必须设置display: flex或display: inline-flex，成为flex容器
  2. order属性必须设置在flex容器的**直接子元素（即flex项目）**上，对容器内的嵌套后代元素设置order不会产生任何效果
• 你当前给.info和.food-img设置order的写法存在错误，这是属性不生效的根本原因。

错误原因拆解 #

观察你的DOM结构层级：

<!-- 你设置了display:flex的flex容器 -->
<div class="row align-items-center container-items">
  <!-- flex容器的第一个直接子元素，属于flex项目，设置order才会生效 -->
  <div class="col-md-6">
    <!-- .info是.col-md-6的子元素，是flex容器的孙级嵌套元素，给它设置order完全无效 -->
    <div class="info">
      <h1>...</h1>
      <p>...</p>
    </div>
    <ul>...</ul>
  </div>
  <!-- flex容器的第二个直接子元素，属于flex项目，给它设置order可以生效 -->
  <div class="col-md-6 food-img">
    <div>
      <img src="image/home.png" alt="">
    </div>
  </div>
</div>

除了选择的元素层级错误，你当前的CSS没有包裹在对应宽度的媒体查询中，会在所有屏幕尺寸下生效，不符合"仅在视口宽度小于575.98px时调换位置"的需求。

修正代码 #

将媒体查询和正确的order设置写入CSS即可实现需求：

/* 仅在视口宽度小于575.98px时触发样式 */
@media (max-width: 575.98px) {
  #home .container-items  {
    display: flex;
    flex-direction: column; /* 小屏纵向排列，符合移动端上下布局的逻辑 */
  }
  /* 包裹文字、列表的第一列设置order:2，排在后面 */
  #home .container-items > .col-md-6:first-child {
    order: 2;
  }
  /* 带图片的列设置order:1，排在顶部 */
  #home .food-img{
    order: 1;
  }
  /* 原有的.info小屏样式可以保留，不需要给它加order属性 */
  #home .info{
    max-width: 100%;
    height: 15rem;
  }
}

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