title: Insert div as the .lastElementChild without 'insertBefore' without jQuery
body: <p>Okay so I've usually had <strong>.box-4</strong> as the last element inside of <strong>.s1</strong> as shown below:</p>
  
  <pre><code>&lt;div class="s1"&gt;
   &lt;div class="box-1"&gt;&lt;/div&gt;
   &lt;div class="box-2"&gt;&lt;/div&gt;
   &lt;div class="box-3"&gt;&lt;/div&gt;
   &lt;div class="box-4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and had <strong>.box-1</strong> move before <strong>.box-4</strong> using the JavaScript:</p>
  
  <pre><code>var box1 = document.querySelector('.box-1');
  var s1 = box1.parentNode;
  
  s1.insertBefore(box1, s1.lastElementChild);
  </code></pre>
  
  <p>to receive the following outcome:</p>
  
  <pre><code>&lt;div class="s1"&gt;
   &lt;div class="box-2"&gt;&lt;/div&gt;
   &lt;div class="box-3"&gt;&lt;/div&gt;
   &lt;div class="box-1"&gt;&lt;/div&gt;
   &lt;div class="box-4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>however, I have recently removed <strong>.box-4</strong> from <strong>.s1</strong>, and consequently <strong>.box-1</strong> no longer move/becomes <strong>the</strong> <strong>.lastElementChild.</strong> I would still like <strong>.box-1</strong> to move, and hence become last, however, I'm unsure of what command will achieve this; desirably something like this </p>
  
  <pre><code>.insertAs(box1, s1.lastElementChild);
  </code></pre>
  
  <p>to achieve this:</p>
  
  <pre><code>&lt;div class="s1"&gt;
   &lt;div class="box-2"&gt;&lt;/div&gt;
   &lt;div class="box-3"&gt;&lt;/div&gt;
   &lt;div class="box-1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>NOTE: <strong>.box-1</strong> changes position depending on screen-width, so simply moving the div in HTML is not an option. </p>
  
  <p>NOTE: <strong>Vanilla JavaScript only</strong> - No jQquery.</p>
  
  <p>Thanks in advance guys, much appreciated!</p>