按特定顺序查找div

Question

如果我有：

<div>A</div>
<div>B</div>
<div>C</div>

有没有办法让div在页面加载时以这种方式出现？

C
A
B

方法无关紧要

Answer 1

您可以使用display：flex和order来重新排列div在dom上的显示方式

检查此代码段

.container {
  display: flex;
  flex-direction: column;
}
div:nth-child(1) {
  order: 2;
}
div:nth-child(2) {
  order: 3;
}
div:nth-child(3) {
  order: 1;
}

<div class="container">

  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

希望有所帮助

Answer 2

您可以使用 css3 flex-box 概念来实现此目标

为父容器提供 display：flex ，并将订单属性提供给子元素

#one{
  background-color:red;
  width:300px;
  height:100px;
  order:2;
  }
#two{
  background-color:green;
  width:300px;
  height:100px;
  order:3;
  }
#three{
  background-color:orange;
  width:300px;
  height:100px;
  order:1;
  }

#parent{
  display: flex;
  }

<div id="parent">
<div id="one">A</div>
<div id="two">B</div>
<div id="three">C</div>
</div>