(() => {
  const move = (sourceNode, targetTarget) => {
    // Get all child elements of the source element
    const sourceNodeChildren = Array.from(sourceNode.childNodes);

    // And append the to the target element
    for (let i = 0; i < sourceNodeChildren.length; i++) {
      targetTarget.appendChild(sourceNodeChildren[i]);
    }
  };

  // Listening to breakpoint and performing the move on breaktpoint hit
  const listenMatchMedia = (sourceNode, targetTarget, breakpoint) => {    
    const mediaQuery = window.matchMedia(`(min-width: ${breakpoint}px)`);
    const handleChange = (e) => {
      if (e.matches) {
        move(targetTarget, sourceNode);
      } else {
        move(sourceNode, targetTarget);
      }
    };
    mediaQuery.addEventListener('change', handleChange);
    handleChange(mediaQuery);
  };

  // Main function
  const moveElems = () => {
    // Get all source elements
    const moveElemSourceNodes = document.querySelectorAll('[data-moveelem-source]');

    // For all source elements
    for (let i = 0; i < moveElemSourceNodes.length; i++) {
      // Get breaktpoint number in px
      const breakpoint = parseInt(moveElemSourceNodes[i].getAttribute('data-moveelem-breakpoint'), 10);
      // Get codename that should be that same for source and target elements
      const moveElemSourceCodename = moveElemSourceNodes[i].getAttribute('data-moveelem-source');
      if (!moveElemSourceCodename || Number.isNaN(breakpoint)) continue;

      // Get appropriate target element
      const moveElemTargetNode = document.querySelector(`[data-moveelem-target="${moveElemSourceCodename}"]`);
      if (!moveElemTargetNode) continue;

      // When breakpoint is hit, move the elements
      listenMatchMedia(moveElemSourceNodes[i], moveElemTargetNode, breakpoint);
    }
  };

  moveElems();
})();