如何在HTML/CSS（Flexbox）中调整文章模块的显示顺序？

问题核心原因 #

order属性仅在flex或grid布局的父容器中生效，你的.text-wrap容器未设置任何布局模式，因此order规则无法起作用。

具体解决方案 #

1. 为父容器启用Flex布局 #

在平板设备的媒体查询中，给.text-wrap添加flex布局，并设置垂直排列，保持模块原有垂直展示的逻辑：

@media screen and (min-width: 481px) and (max-width:1279px) /* 平板 */
{
    .text-wrap {
        display: flex;
        flex-direction: column;
        /* 可选：添加gap控制模块间距，优化美观度 */
        gap: 2rem;
    }
}

2. 为Article设置order值 #

所有元素默认order值为0，数值越小排列越靠前。通过自定义order值交换第一个与第三个模块的位置：

• 让第三个模块（#art3）排到最前，设置order: 1
• 第二个模块（#art2）保持中间位置，设置order: 2（或继承默认值0，明确设置更清晰）
• 第一个模块（#art1）排到最后，设置order: 3

完整媒体查询代码：

@media screen and (min-width: 481px) and (max-width:1279px) /* 平板 */
{
    .text-wrap {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    #art1 {
        order: 3;
    }

    #art2 {
        order: 2;
    }

    #art3 {
        order: 1;
    }
}

3. 修复HTML结构错误 #

你的第三个article（#art3）存在标签嵌套问题：<pre>标签错误包裹了<header>的开头部分，会导致布局渲染异常，修正后的代码片段：

<article id="art3">
    <header class="inno"> Innovation 3, Photo finishes. </header>
    <!-- 其余内容保持不变 -->
</article>

效果验证 #

修改完成后，在平板尺寸的浏览器窗口刷新页面，模块顺序会变为：Innovation 3 → Innovation 2 → Innovation 1，满足交换第一个与第三个模块的需求。

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