如何通过修改类名而非HTML位置，用样式将section移至上方并保持响应式

先修正初始HTML的标签错误 #

你原来的HTML里<section>标签用</div>闭合了，属于无效标签，先改成正确的结构：

<html>
<head>
</head>
<body>
    <div class="wrapper">
        <section class="first">First Content</section>
        <section class="second">Second Content</section>
        <section class="third">ThirdContent</section>
    </div>
</body>
</html>

仅改类名+CSS实现置顶需求（保持响应式） #

不用调整HTML元素的物理位置，只修改类名，配合Flex布局的order属性就能实现，还能保证响应式：

修改后的完整代码（仅调整类名，元素位置不变） #

<html>
<head>
    <style>
        .wrapper {
            display: flex;
            flex-direction: column;
            /* 默认垂直排列，小屏幕自动堆叠，天生响应式 */
        }
        /* 用order控制显示顺序：数值越小，显示位置越靠前 */
        .top-priority {
            order: 1;
        }
        .normal-order {
            order: 2;
        }
        .bottom-order {
            order: 3;
        }

        /* 可选：自定义响应式断点，比如小屏幕下恢复原顺序 */
        @media (max-width: 768px) {
            .top-priority {
                order: 3;
            }
            .normal-order {
                order: 1;
            }
            .bottom-order {
                order: 2;
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <section class="normal-order">First Content</section>
        <section class="bottom-order">Second Content</section>
        <section class="top-priority">ThirdContent</section>
    </div>
</body>
</html>

关键说明 #

• 核心是用Flex的order属性：给需要置顶的原第三个section（ThirdContent）加top-priority类，设置最小的order值，它就会在视觉上跑到最顶部，完全不用动HTML元素的位置。
• Flex布局本身就是响应式的，在手机等小屏幕上元素会自动垂直堆叠；如果需要在特定屏幕尺寸下调整顺序，加个媒体查询改order值就行，非常灵活。
• 你之前给出的修改后HTML把内容和类名的对应关系搞混了（比如把显示First Content的section改成了third类），其实没必要乱换原有类名，直接给元素加控制顺序的类，逻辑更清晰。

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