title: Dynamically re-order tiles based on different size browser or mobile screen
body: <p>Whatever screen is being used to view the page, I would like to show as many tiles as possible. Different scenarios include:</p>
  
  <ul>
  <li>Mobile browswer (iPhone, Android)</li>
  <li>iPad or Android Table or Kindle Fire</li>
  <li>Narrow Browser window (safari, chrome, ie, firefox, operta, etc)</li>
  <li>Full screen Browser window</li>
  </ul>
  
  <p>One solution I thought of was to use <strong>960.gs</strong> and <strong>adaptive.js</strong> ... however, when I set the size of the div, for example:</p>
  
  <blockquote>
    <p>div class="tile grid_4"</p>
  </blockquote>
  
  <p>I noticed that adaptive.js would resize the tile (becase the different .css files resize the columns)... However, I need to keep a fixed tile size (310px X 450px)....</p>
  
  <p><strong>Perhaps I need to dynamically rename the div class so that the # of columns x col width = 310px?</strong></p>
  
  <p>One site that does this is <a href="http://pinterest.com" rel="nofollow noreferrer">http://pinterest.com</a></p>
  
  <p>And to see what each <strong>tile</strong> looks like, please check out <a href="http://jsfiddle.net/hagope/76jjp/" rel="nofollow noreferrer">http://jsfiddle.net/hagope/76jjp/</a></p>
  
  <p><img src="https://i.stack.imgur.com/xdFPE.jpg" alt="Tiles on Different Size Browsers"></p>