title: move content back and forth like media queries
body: <p>I want to move content on window resize. </p>
  
  <p>E.g. when the content is wider than 766 let it stay but if it is smaller move it to another div.</p>
  
  <p>But if someone decides to go into landscape I also want it to check whether it had previously been moved. Therefore I created this script:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $prevent_filter_issues = 1;
  window.addEventListener('resize', function(){}, true);
  $(window).on('resize', function(){
      if ($(window).width() &lt; 767 &amp;&amp; $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() &gt; 766 &amp;&amp; $prevent_filter_issues == 2) {
          var $but_small_large = $('#sidebar_filter').clone().remove();
          $('[id^="product_filters"]').before($but_small_large);
          var $prevent_filter_issues = 1;
      }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>But this script still does not work. Could any please help me out?</p>
  
  <p>/* EDIT */
  This script did the job for me:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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() &lt; 767 &amp;&amp; $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() &gt; 766 &amp;&amp; $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();
      }
  }</code></pre>
  </div>
  </div>
  </p>