嵌套Flex布局下如何通过order属性调整元素显示顺序？

你遇到的核心问题是：Flex的order属性仅对flex容器的直接子元素生效。

当前.flex-wrap是flex容器，它的直接子元素只有.flex-container和.third两个；而.first、.second是.flex-container这个嵌套容器的子元素，不属于.flex-wrap的直接子层级，所以直接给.first或.second设置order，不会影响它们在.flex-wrap布局中的整体顺序。

方案1：调整HTML结构（推荐，最稳妥） #

把.second从.flex-container中移出，让它成为.flex-wrap的直接子元素，这样三个需要排序的目标模块（包含.first的.flex-container、.third、.second）都属于.flex-wrap的直接子元素，就能通过order自由控制顺序。

修改后的HTML：

<div class="flex-wrap">
    <div class="flex-container">
        <div class="first"></div>          
    </div>
    <div class="third">
        <img>
    </div>
    <div class="second"></div>
</div>

对应的CSS（默认结构已经是你要的first → third → second，如果需要更灵活的调整，可以显式设置order）：

.flex-wrap {
    display: flex;
    flex-direction: column;
}

/* 显式定义顺序，后续调整更直观 */
.flex-container { order: 1; }
.third { order: 2; }
.second { order: 3; }

方案2：不修改HTML结构（仅应急用，不推荐） #

如果无法调整HTML结构，只能通过绝对定位等脱离文档流的方式模拟视觉顺序，但这种方法依赖固定高度，响应式场景下容易出现布局错乱：

.flex-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    /* 必须设置容器最小高度，避免定位元素溢出 */
    min-height: 300px;
}

.third {
    position: absolute;
    /* 根据.first的实际高度调整top值 */
    top: 100px;
}

.second {
    /* 根据.third的实际高度调整margin-top，避免重叠 */
    margin-top: 150px;
}

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