javascript - 小屏幕上的 insertBefore div 和大屏幕上的 insertAfter

Question

在我的示例中，我尝试仅在大屏幕上将小 Div 插入到大 Div 上方。然后，在调整窗口大小时，我想仅在小屏幕上的中 Div 下方插入相同的小 Div。 问题是，每次我调整窗口大小时，小 Div 都会被一遍又一遍地添加，而我希望它只添加一次。

请注意，我正在寻找 JS 或 jQuery 解决方案。

问候。

var smallDiv = '<div class="small">Small Div</div>';

function moveDiv() {
  if ($(window).width() < 800) {
    $(smallDiv).insertBefore(".large");
  } else {
    $(smallDiv).insertAfter(".medium");
  }
}
moveDiv();
$(window).resize(moveDiv);

<!-- begin snippet: js hide: false console: true babel: false -->

.large {
  width: 100%;
  height: 80px;
  background-color: darkgray;
}

.medium {
  width: 100%;
  height: 50px;
  background-color: goldenrod;
}

.small {
  width: 100%;
  height: 30px;
  background-color: aquamarine;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="large">Large Div</div>
<div class="medium">Medium Div</div>

Answer 1

Renlado 的回答缺少问题的一部分。您可以按照建议使用 Flex-box，并使用 order 属性对元素进行排序。

.container {
  display: flex;
  flex-direction: column;
}

.container>div {
  order: 1
}

.container>.small {
  order: 0;
}

@media only screen and (max-width: 800px) {
  .container .small {
    order: 2;
  }
}

<div class="container">
  <div class="large">Large Div</div>
  <div class="medium">Medium Div</div>
  <div class="small">Small Div</div>
</div>