像媒体查询一样来回移动内容

Question

我想在窗口大小调整上移动内容。

E.g。当内容宽于766时，让它保持不变，但如果它更小则将其移动到另一个div。

但如果有人决定进入风景，我也希望它检查以前是否已被移动。因此我创建了这个脚本：

var $prevent_filter_issues = 1;
window.addEventListener('resize', function(){}, true);
$(window).on('resize', function(){
    if ($(window).width() < 767 && $prevent_filter_issues == 1) {
        var $but_large_small = $('[id^="product_filters"]').clone().remove();
        $('#sidebar_filter').before($but_large_small);
        var $prevent_filter_issues = 2;
    } else if ($(window).width() > 766 && $prevent_filter_issues == 2) {
        var $but_small_large = $('#sidebar_filter').clone().remove();
        $('[id^="product_filters"]').before($but_small_large);
        var $prevent_filter_issues = 1;
    }
});

但是这个脚本仍然不起作用。请问有什么可以帮助我吗？

/ *编辑* / 这个脚本为我完成了这项工作：

var $prevent_filter_issues = 1;
window.addEventListener('resize', function(){}, true);
$(document).ready(filter_optimize);
$(window).on('resize',filter_optimize);

function filter_optimize(){
    if ($(window).width() < 767 && $prevent_filter_issues == 1) {
        window.$prevent_filter_issues = 2;
        var $but_large_small = $('.cat-product-filters .ty-sidebox__body .cm-product-filters').clone().appendTo('#sidebar_filter');
        $('.cat-product-filters .ty-sidebox__body .cm-product-filters').remove();
    } else if ($(window).width() > 766 && $prevent_filter_issues == 2)  {
        window.$prevent_filter_issues = 1;
        var $but_small_large = $('#sidebar_filter .cm-product-filters').clone().appendTo('.cat-product-filters .ty-sidebox__body');
        $('#sidebar_filter .cm-product-filters').remove();
    }
}