move table of contents between two blocks dependong on window size

footer-scripts.html

<script>
  
document.addEventListener('DOMContentLoaded', function () {
  
  const toc = document.querySelector('.my-table-of-contents');     /* class of table of contents element */
  const mobileTarget = document.querySelector('.mobile-block'); /* class of container to put TOC in for mobile */
  const desktopTarget = document.querySelector('.desktop-block'); /* class of container to put TOC in for desktop */

  if (!toc || !mobileTarget || !desktopTarget) {
    return;
  }

  function moveToMobile() {
    if (toc.parentNode !== mobileTarget) {
      mobileTarget.appendChild(toc);
    } 
  }

  function moveToDesktop() {
    if (toc.parentNode !== desktopTarget) {
      desktopTarget.appendChild(toc);
    } 
  }

  const mql = window.matchMedia('(max-width: 767px)'); /* change 767px to your breakpoint */

  function checkPlacement(e) {
    if (e.matches) {
      moveToMobile();
    } else {
      moveToDesktop();
    }
  }

  // Initial placement check
  checkPlacement(mql);

  // Listen for breakpoint crossing
  mql.addEventListener('change', checkPlacement);
});
  
</script>