javascript - 如何仅在较小的屏幕尺寸上使用 jQuery appendTo，但在较大的屏幕上返回正常位置

Question

我有一个位于桌面侧边栏中的 div，当它向下移动到移动设备时 (< 992)，我希望该 div 转到页面底部，位于主要内容中显示的最后一个 div 下方在更大的屏幕上(> 992)。我在文档加载和窗口调整大小时都触发了 appendTo。

目前，当我将窗口的大小调整为小于 992 时，div 会向下移动，但是当我将其调整为大于 992 时，它会停留在底部并且不会返回到侧边栏。这是我目前拥有的:

<div class="sidebar hidden-sm hidden-xs">
  <div class="some-div">This should go away on mobile and is not always  present so I can't append the next div to me on bigger screens</div>
  <div class="important-info">This should move to other div on mobile</div>
  <div class="some-div">This should go away on mobile</div>
</div>

<div class="middle-content">
      <div class="stuff">always shown on mobile and desktop</div>
</div>

我的 JS 是:

function moveDiv() {
    if ($(window).width() < 992) {
        $('.important-info').appendTo('.middle-content');
    } else {
        return;
    }
}
moveDiv();
$(window).resize(moveDiv);

如果有人可以指导我在更大的屏幕上让我的内容返回侧边栏并离开中间内容，那就太好了!提前致谢:)

Answer 1

只需添加代码即可将其移回。我使用了包装器来更轻松地在其他元素之间正确定位重要信息。

请注意，我假设您使用的是 CSS Media隐藏 some-div 的查询，您只需要在 DOM 中“物理地”重新定位 important-info(这不能用 CSS 完成)。如果你能弄清楚如何摆脱纯 CSS 解决方案，那通常会更高效且更易于维护。我假设您有一些要求迫使您在 DOM 中重新定位元素，而不仅仅是重新设计它的样式。

function moveDiv() {
    if ($(window).width() < 992) {
        $('.important-info').appendTo('.middle-content');
    } else {
        $('.important-info').appendTo('#important-info-wrapper-desktop');
    }
}
moveDiv();
$(window).resize(moveDiv);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar hidden-sm hidden-xs">
  <div class="some-div">This should go away on mobile and is not always  present so I can't append the next div to me on bigger screens</div>
  <div id="important-info-wrapper-desktop">
    <div class="important-info">This should move to other div on mobile</div>
  </div>
  <div class="some-div">This should go away on mobile</div>
</div>

<div class="middle-content">
      <div class="stuff">always shown on mobile and desktop</div>
</div>