title: Swapping div position depending on screen width
body: <p>I'm trying to create a responsive website and would like two div's to swap position depending on the screen width (on start and when resizing).</p>
  
  <p>I have done some research and tried a few options but had no luck. I'm fairly new to JQuery and JS so any help would be greatly appreciated.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="div1"&gt;facebook&lt;/div&gt;
  &lt;br/&gt;
  &lt;div id="div2"&gt;&lt;img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY"/&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jquery</p>
  
  <pre><code>$(document).ready(function(){
  div1 = $('#div1');
  div2 = $('#div2');
  tdiv1 = div1.clone();
  tdiv2 = div2.clone();
  .resize()
  });
  
  $(window).resize(function() { //Fires when window is resized
      if($(window).width() &lt; 800){
      div1.replaceWith(tdiv2);
      div2.replaceWith(tdiv1);}
      else{
      div1.replaceWith(tdiv1);
      div2.replaceWith(tdiv2);}  
      });
  </code></pre>