3 个元素的自适应布局，无需重复 HTML 元素。有可能吗？ [重复]

Question

如何在小屏幕上交换块2和块3？没有重复的 HTML 标签，并且块的桌面布局也没有被破坏。没有绝对的立场。

.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;
    }
}

<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>

jsfiddle.net

大屏幕上的第1块和第3块之间不能有空白

Answer 1

太棒了，找到了

display: contents

https://jsfiddle.net/pghv51n8/10/