排列.prependto小于500px的元素，当>500px时如何撤消？

Question

如果屏幕尺寸低于500px，我正在尝试重新排列一些元素，如果屏幕尺寸低于500px，则将一些元素移到父元素内部更高的位置，为此，Im使用

if ($(window).width() < 500) {
   $("#two").prependTo(".grid");
} 

我的html是这样的：

<div class="grid">
  <div class="grid-item" id="one">
  ONE - top when browser >500px
  </div>

  <div class="grid-item" id="two">
  TWO - top when browser <500px
  </div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

但是，如果浏览器窗口再次变得大于500px，我不确定最好的方法来扭转这种情况？是否可以使用类似于以下内容的elseif来完成此操作：

if ($(window).width() < 700) {
  $("#two").prependTo(".grid");
} else if ($(window).width() > 700){
   $("#one").prependTo(".grid");
}

或者有没有一种更健壮的方式来写这篇文章？

Answer 1

将resize事件添加到window元素当浏览器窗口的大小发生变化时，您的代码将应用。

$( window ).resize(function() {

   if ($(window).width() < 700) {
     $("#two").prependTo(".grid");
   } else {
     $("#one").prependTo(".grid");
   }
});