title: Repositioning divs via nth-child for different browser widths in jQuery
body: <p>I found a simple method within jQuery that allows me to add divs after other divs, based on the viewers browser width. So what I do is tell the browser to insert the "test5" div after the 30th "inner" div, if the browser width exceeds 500px. Then I also tell it to remove this div if the browser width is less than 500px. I also got this working with multiple divs so when the broswer width is less than 500px, it hides the original div placed after the 30th "inner" div, then it shows four more divs (test, test2, test3 &amp; test4).  So I got this whole thing working with multiple divs. This is great.</p>
  
  <p>Right now, I want to change the <code>nth-child</code> position of the divs for each specified browser width.  So the way I would have to do that now is insert 5 divs for one width, hide them for another width, insert another 5 divs for another width, hide them for another width and so on and so on.  Instead of constantly adding the 5 divs and then hiding them for each different browser width, I would like to just change the nth-child position for different browser widths.  So here is my old code.. please note that for this example I am just using 5 divs, 1 being displayed when the browser width exceeds 500px and then 4 divs that show when the browser width is less than 500px.. </p>
  
  <p>Here is the old code:</p>
  
  <pre><code>var $window = $(window);
  var resized=false;
  var resized500=false;
  function checkWidth() {
  
  var windowsize = $window.width();
  if (windowsize &gt; 440) {
      if(resized==false){
     $( '.inner:nth-child(5)' ).after( '&lt;div class="test"&gt;');
     $( '.inner:nth-child(10)' ).after( '&lt;div class="test2"&gt;');
          resized=true;
      }
  }
  
  if (windowsize &gt; 500) {
      if(resized500==false){
   $( '.inner:nth-child(30)' ).after( '&lt;div class="test3"&gt;');
          resized500=true;
      }
  }
   if (windowsize &gt;= 500) {
       $('.test, .test2').remove();
       resized=false;
   }
  if (windowsize &lt;= 500) {
       $('.test3').remove();
       resized500=false;
   }
  }
  // Execute on load
  checkWidth();
  // Bind event listener
  $(window).resize(checkWidth);
  </code></pre>
  
  <p>Here is the old jsfiddle to demonstrate this code in action (you have to resize the HTML window in order to see the divs appear and dissapear):</p>
  
  <p><a href="http://jsfiddle.net/EUqEm/72/" rel="nofollow">http://jsfiddle.net/EUqEm/72/</a></p>
  
  <p>I would like to come up with a method that doesn't hide the divs or add new ones on browser width change, instead I would like it to just reposition the divs via <code>nth-child</code> for each specified browser width.  I'm not sure how I would do this but here is a starting base jquery code for how I think it may work, as well with a jsfiddle. This is with 3 browser widths for example purposes.</p>
  
  <pre><code>var $window = $(window);
  var resized=false;
  var resized500=false;
  var resized600=false;
  function checkWidth() {
  
  var windowsize = $window.width();
  if (windowsize &gt; 440 &amp;&amp; windowsize &lt; 500) {
      //if the window is in between the sizes of 440 and 500px
      if(resized==false){
     $( '.inner:nth-child(5)' ).after( '&lt;div class="test"&gt;');
     $( '.inner:nth-child(10)' ).after( '&lt;div class="test2"&gt;');
     $( '.inner:nth-child(12)' ).after( '&lt;div class="test3"&gt;');
     $( '.inner:nth-child(15)' ).after( '&lt;div class="test4"&gt;');
          resized=true;
      }
  }
  
  if (windowsize &gt; 500 &amp;&amp; windowsize &lt; 600) {
      //if the window is in between the sizes of 500 and 600px
      if(resized500==false){
  
   // code that repositions all four test divs up one number (5 to 6, 10 to 11, etc.)
          resized500=true;
  
      }
  }
  
  if (windowsize &gt; 600 &amp;&amp; windowsize &lt; 700) {
      //if the window is in between the sizes of 600 and 700px
      if(resized600==false){
  
   // code that repositions all four test divs up one number again.(6 to 7, 11 to 12, etc.)
          resized600=true;
  
      }
  }
  
  }
  
  // Execute on load
  checkWidth();
  // Bind event listener
  $(window).resize(checkWidth);
  </code></pre>
  
  <p>Here is the jsFiddle of this early base code(doesn't fully work since there are no values set for the various browser widths):</p>
  
  <p><a href="http://jsfiddle.net/EUqEm/73/" rel="nofollow">http://jsfiddle.net/EUqEm/73/</a></p>
  
  <p><strong>So just to recap real quickly:</strong></p>
  
  <p>I have divs that are being placed after other divs via nth-child that appear and dissapear based on the viewers browser width.  At the moment, I have to place divs in the correct spot via nth-child (which is fine) and then make the divs dissapear for resolutions, then make new ones reappear, and I have to repeat this process for all the browser widths / resolutions. I would like to make it so I insert this divs via nth-child (just like i am doing now) but instead of having to hide the divs and show new ones for each browser width, I would like to be able to just change the nth-child position for the different browser widths.</p>
  
  <p>If anyone knows of a solution to this problem feel free to leave an answer maybe even with a working jsFiddle demo aswell. :)</p>