使用Javascript/CSS切换两个HTML元素的位置

Question

我们在页面底部附近有一些HTML元素，这些元素没有被太多使用。我们想用谷歌标签管理器做一些测试，用页面顶部附近的一些元素来切换这些元素。使用纯JS或CSS是否可以切换两个HTML元素的位置？例如，假设我想切换div1和div3:的位置

<div class="container">
<div class="div1">
<span>1</span>
</div>
<div class="div2">
<span>2</span>
</div>
<div class="div3">
<span>3</span>
</div>
</div>

Answer 1

您可以像这样使用css的flexbox来切换子内容的位置。

.container {
display: flex;
}
.div1 {
order: 3;
}
.div3 {
order: 1;
}
.div2 {
order: 2;
}

<div class="container">
<div class="div1">
<span>1</span>
</div>
<div class="div2">
<span>2</span>
</div>
<div class="div3">
<span>3</span>
</div>
</div>