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

【问题标题】：Switching the position of two HTML elements with Javascript/CSS使用 Javascript/CSS 切换两个 HTML 元素的位置
【发布时间】：2021-06-14 10:51:51
【问题描述】：

我们在页面底部附近有一些 HTML 元素没有被大量使用。我们想使用 Google 跟踪代码管理器进行一些测试，以将这些元素与页面顶部附近的一些元素进行切换。是否可以使用纯 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>

【问题讨论】：

您能否添加一些您正在使用的代码示例，并为您已经尝试过的事情添加一些步骤？
可以在css中使用flexbox
要切换元素的位置，可以使用flexbox里面的order属性

标签： javascript css google-tag-manager

【解决方案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>

【讨论】：