仅使用CSS交换容器元素的顺序

Question

这是我试图弄清楚的挑战。我需要交换A - B和E - Fdiv在相反的顺序使用css，但C - D离开它是。

下面是我使用JSfiddle

的代码

<style>
.column div {
display: block;
border: 1px solid red;
margin: 0 auto 20px;
text-align: center;
width: 300px;
}
</style>
<div class="column">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>

图片显示问题

Answer 1

说明

正如其他人已经提到的，您可以尝试使用display: flex在容器内利用CSS属性顺序。默认情况下，元素以它们在文档中出现的顺序呈现，但您可以通过该属性更改顺序。

示范

.column {
display: flex;
flex-direction: column;
}
.column > div {
display: block;
border: 1px solid red;
margin: 0 auto 20px;
text-align: center;
width: 300px;
}
.column > div:nth-child(2) {
order: -1;
}
.column > div:nth-child(5) {
order: 1;
}

<div class="column">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>

额外的资源你可以随时查看A Complete Guide to Flexbox获取更多关于CSS Flexbox的解释。