如何调整div内flex布局元素的order显示顺序？

order 属性本身不受 flex-direction 取值影响，行、列布局下都能正常控制flex子元素的排序，你遇到失效的问题可按以下步骤排查修正：

• 首先确认父容器已正确开启flex布局，且切换列模式时flex-direction: column配置生效：你当前示例代码里父容器用的是flex-row类，要切换列布局需要替换为对应包含display: flex + flex-direction: column规则的类，不要只修改子元素的order值忽略父容器配置。
• 确认要排序的元素是flex容器的直接子节点：order仅对flex容器的一级子元素生效，如果你的图片或文本块外层额外嵌套了其他标签，对应的order设置会失效。
• 排查样式优先级冲突：如果有其他更高优先级的CSS规则给子元素设置了order属性，会覆盖你写的order-1、order-2规则，可打开浏览器开发者工具选中对应元素查看样式表确认。

以下是可直接运行的正确示例：

原生CSS写法 #

</head> 
<body>
    <div style="display: flex; flex-direction: column;">
        <div style="order: 2;">
            <h1>Flying Kites</h1>
            <h2>Subheader</h2>
        </div>
        <img style="order: 1;" src="/examples/images/kites.jpg" alt="Flying Kites">
    </div>
</body>
</html>

Tailwind CSS写法 #

<div class="flex flex-col">
    <div class="order-2">
        <h1>Flying Kites</h1>
        <h2>Subheader</h2>
    </div>
    <img class="order-1" src="/examples/images/kites.jpg" alt="Flying Kites">
</div>

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