不重复HTML元素实现三元素自适应布局：小屏交换2、3区块方案

需求说明 #

• 不修改HTML结构、不使用position:absolute
• 桌面端布局保持不变，且区块1与3之间无空隙
• 小屏幕（≤600px）下，区块显示顺序改为「1 → 3 → 2」

初始代码 #

CSS #

.wrap {
    display: flex;
}
.col {
    flex-grow: 1;
}
.el {
    flex-grow: 1;
    text-align: center;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.one {
    height: 200px;
    background-color: #8BAFED;
}
.two {
    height: 500px;
    background-color: #FEDDCC;
}
.three {
    height: 400px;
    background-color: #FF7100;
}

@media (max-width: 600px) {
    .wrap {
        flex-direction: column;
    }
}

HTML #

<div class="wrap">
    <div class="col">
        <div class="el one">1</div>
        <div class="el two">2</div>
    </div>
    <div class="col">
        <div class="el three">3</div>
    </div>
</div>

解决方案 #

通过在小屏幕媒体查询中切换为CSS Grid布局，利用grid-row控制元素排列顺序，同时保留桌面端的Flex布局：

修改后的CSS #

.wrap {
    display: flex;
}
.col {
    flex-grow: 1;
}
.el {
    flex-grow: 1;
    text-align: center;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.one {
    height: 200px;
    background-color: #8BAFED;
}
.two {
    height: 500px;
    background-color: #FEDDCC;
}
.three {
    height: 400px;
    background-color: #FF7100;
}

@media (max-width: 600px) {
    .wrap {
        display: grid;
    }
    .one {
        grid-row: 1;
    }
    .three {
        grid-row: 2;
    }
    .two {
        grid-row: 3;
    }
    /* 让容器不参与布局，直接暴露子元素给Grid */
    .col {
        flex-grow: unset;
        display: contents;
    }
}

实现逻辑 #

1. 桌面端保持原Flex布局，两个.col平分宽度，区块1和3横向相邻无空隙，完全符合需求。
2. 小屏幕下切换为Grid布局，通过grid-row指定元素的行位置，直接实现「1 → 3 → 2」的显示顺序。
3. 使用display: contents让.col容器不占据Grid布局空间，直接让内部的.el元素成为Grid的子元素，无需修改HTML结构。

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