如何通过CSS更改DIV顺序

Question

假设有一个父div和五个子div。现在，当我们不应用CSS时，它们将被一个放在另一个下面。

如何更改3rddiv的位置，使其可以位于1stdiv上方，也可以位于2nddiv或4thdiv下方。我们如何使用CSS做到这一点？

注意-HTML无法更改。

<div class="parent">
<div class="child1">
1
</div>
<div class="child2">
2
</div>
<div class="child3">
3
</div>
<div class="child4">
4
</div>
<div class="child5">
5
</div>
</div>

Answer 1

您应该使用flex或grid框，然后您可以更改其子元素的顺序。看看这个DOC页面

/* this will make your container flex */
.parent {
display: flex;
flex-direction: column;
}
/* 
change order of your child element 
possible selectors:
- class: .child3
or
- without child class: .parent > div:nth-child(3)
*/
.child3 {
order: -1;
}

<div class="parent">
<div class="child1">
1
</div>
<div class="child2">
2
</div>
<div class="child3">
3
</div>
<div class="child4">
4
</div>
<div class="child5">
5
</div>
</div>

Answer 2

如果允许设置父div的样式，则可以使用display flex和flex direction列。然后将order属性应用于子项，这样您就可以根据自己的喜好对其进行调整。