title: Move elements back and forth depending on screen width with JavaScript
body: <p>The point of this is to move elements into another HTML container on screen resizing. So when it hits a targeted width, it moves in to the new container then, returns if it's not the target width on resize. Problem is, I can get it to work under the width but can't put them back when resizing the screen:</p>
  <p>HTML:</p>
  <pre><code>&lt;div id=&quot;target&quot;&gt;
    &lt;!-- move-me goes in here --&gt;
  &lt;/div&gt;
  
  &lt;div id=&quot;original&quot;&gt;
    &lt;div class=&quot;move-me&quot;&gt;
      &lt;p&gt;Stuff&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;move-me&quot;&gt;
      &lt;p&gt;Stuff&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;move-me&quot;&gt;
      &lt;p&gt;Stuff&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>function moveDetails() {
      let screenWidth = window.innerWidth;
      let target = document.getElementById(&quot;target&quot;);
      let origin = document.getElementById(&quot;original&quot;);
      let moveMe = document.querySelectorAll(&quot;.move-me&quot;);
      if(screenWidth &lt;= 1100) {
          moveMe.forEach(m =&gt; {
              target.innerHTML += m.innerHTML;
              m.innerHTML = &quot;&quot;;
          });
      } 
  }
  moveDetails();
  </code></pre>
  <p>I tried grabbing the &quot;original&quot; id then reversing it with an else, but no luck. Any help would be appreciated, vanilla JS if possible.</p>
  <p><strong>Update #1: Solution!</strong></p>
  <p>After even more digging (check out <a href="https://gomakethings.com/breakpoint-conditional-javascript-in-vanilla-js/" rel="nofollow noreferrer">this link</a> for a better explanation). This works on both whichever breakpoint you set, loads properly on each device and changing parent container when resizing. Still need to implement the dry version.</p>
  <p>JS:</p>
  <pre><code>function moveDetails() {
      /*
      Call your targets, both inner width and client width finally, set break point
      */
      let target = document.getElementById(&quot;target&quot;),
              origin = document.getElementById(&quot;original&quot;),
              moveMe = document.querySelectorAll(&quot;.move-me&quot;),
              breakPoint = 1100,
              viewportWidth = window.innerWidth || document.documentElement.clientWidth;
      /*
      This is for anything below the breakpoint on refersh so the changes immediately show.
      We'll use the method &quot;appendChild()&quot; throughout on the parent elements.
      */      
      if (viewportWidth &lt; breakPoint) {
          moveMe.forEach(m =&gt; {
              target.appendChild(m);
          });
      }
      /*
      addEventListener of 'resize' so it will add/remove elements with the
      given class name to the targeted ids/parents
      */
      window.addEventListener('resize', () =&gt; {
          let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
          if (viewportWidth &lt; breakPoint) {
              moveMe.forEach(m =&gt; {
                  target.appendChild(m);
              });
          } else {
              moveMe.forEach(m =&gt; {
                  origin.appendChild(m);
              });
          }
      });
  }
  moveDetails();
  </code></pre>
  <p>To also note, this is great for grabbing specific class named elements. Most methods I came across would select EVERY child element. So, if you need to grab something specific, hopefully this would help.</p>