使用 Javascript/CSS 切換兩個 HTML 元素的 position

Question

我們在頁面底部附近有一些 HTML 元素沒有被太多使用。 我們想使用 Google 跟蹤代碼管理器進行一些測試，以將這些元素與頁面頂部附近的一些元素進行切換。 是否可以使用普通 JS 或 CSS 切換兩個 HTML 元素的 position？ 例如，假設我要切換 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>