title: Swapping divs around depending on screen size
body: <p>I am working on a responsive site, although i cant really change the HTML around, just the CSS and JS.</p>
  
  <p>I have a grid of fixtures, and when the screen size get to 480px i want to move a div to below another div.</p>
  
  <p>To see the problem, view this demo i set up <a href="http://jsfiddle.net/FyXRU/" rel="nofollow">http://jsfiddle.net/FyXRU/</a></p>
  
  <p>My Code is </p>
  
  <pre><code>&lt;div class="fixture"&gt;
      &lt;div class="fixture-date"&gt;Date&lt;/div&gt;
  
      &lt;div class="teams"&gt;Teams&lt;/div&gt;
  
      &lt;div class="details"&gt;Detials&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  
  &lt;div class="fixture"&gt;
      &lt;div class="fixture-date"&gt;Date&lt;/div&gt;
  
      &lt;div class="teams"&gt;Teams&lt;/div&gt;
  
      &lt;div class="details"&gt;Detials&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  
  &lt;div class="fixture"&gt;
      &lt;div class="fixture-date"&gt;Date&lt;/div&gt;
  
      &lt;div class="teams"&gt;Teams&lt;/div&gt;
  
      &lt;div class="details"&gt;Detials&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  
  &lt;div class="fixture"&gt;
      &lt;div class="fixture-date"&gt;Date&lt;/div&gt;
  
      &lt;div class="teams"&gt;Teams&lt;/div&gt;
  
      &lt;div class="details"&gt;Detials&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  $(window).resize(function() { //Fires when window is resized
      iTargetWidth = $(window).width();
  
      if (iTargetWidth &lt; 770) { 
          $("div.fixture-date").insertAfter("div.teams");
      }
  });
  </code></pre>
  
  <p>what im after is moving the date after the teams div.</p>
  
  <p>Any help would be great.</p>