在小屏幕上，插入div之前，在大屏幕上，插入div之后

Question

在我的示例中，我仅尝试在大屏幕上将大Div插入大Div。然后在窗口调整大小时，我只想在小屏幕上插入相同的“小div”，即“小div”。问题是，每次我调整窗口大小时，都会不断增加Small 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>

Answer 2

不是jQuery爱好者，所以让我们使用CSS来做

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

@media only screen and (max-width: 800px) {
  .container {
    flex-direction: column-reverse;
  }
}

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