jquery - jquery .insertAfter - 要素を移動できますが、元に戻すことはできません

Question

私のテンプレートには、レスポンシブ (モバイル) ビューでページの上部に移動する必要がある右側のサイドバー コンテナーがあります。このコンテナーは DOM の下位にあるため、すべてのコンテンツの下に表示されていました。移動するためにこのスクリプトを書きましたが、問題は、ウィンドウのサイズを切り替えると元に戻らないことです。（ユーザーが決して見ることのない、私にとっては厄介なバグです）

動作の実例はhttp://sandbox.dev.activemls.com/agent/にあります。

ここに私のコードがあります:

var moveSidebar = function() {
    var windowsize = $(window).width(),
        isDesktop = windowsize > 765;
    if(!isDesktop) {
        $('#sidebar-3').insertAfter($('#sidebar-1'));
    }
    else if (isDesktop) {
        $('#sidebar-3').insertAfter($('#moveSidebar'));
    }    
}
$(document).ready(moveSidebar);
$(window).on("resize.showContent", moveSidebar);
moveSidebar();

html は次のようになります。

<div id="sidebar-1">
     <!--sidebar content-->
</div>
<div id="sidebar-2">
     <!--sidebar content-->
</div>
<div id="moveSiderbar">
     <div id="sidebar-3" class="well well-small">
          <!--sidebar content-->
     </div>
</div>