Html 如何通过CSS更改两个Div的位置

我有一个

html代码

<div class="main">
  <div class="child1">I'm working Child 1</div>
  <div class="child2" >I'm working Child 2</div>
  <div class="child3" >I'm working Child 3</div>
</div>
<div class="another">
 <div class="child111">I'm working Child 111</div>
</div>

我在为一个孩子工作
我在为孩子2工作
我在工作，孩子3
我在工作

---

现在，我想在

Child2

之前显示

Child111

，但在

Child1

之后，通过CSS

可以使用网格和网格模板区域，在这些区域中，您可以自定义放置带有网格区域的顺序或列。网格区域为您提供了行的显示方式的可视化表示，并允许您命名行以提高可读性：

.main {
  display: grid;
  grid-template-areas:
      "first-row"
      "second-row"
  ;
}

.child1 {
  grid-area: first-row;
}

.child2 {
  grid-area: second-row;
}

---

阅读更多信息：

您可以通过使用Flexbox和设置

flex direction:column reverse轻松做到这一点。它将改变孩子们的顺序

阅读更多关于


.main{
显示器：flex；
弯曲方向：柱反向；
}

我在为一个孩子工作
我在为孩子2工作
还有另一种可能性：

.main>div{ float: left;}

或

这回答了你的问题吗？你以前说的是什么意思？页面上方或其他分区上方？@jamesburges先生，这与您提到的答案不同，请查看更新问题。
.main>div{ float: right;}