title: Generating image wall from bottom up
body: <p>I'm trying to build a virtual image wall where users can add a new brick to the top of the wall. So far I have used a float left to make all of the images wrap, but the problem with this is that it will be building from the top down and when a new brick is added it will add another brick to the bottom rather than the top. </p>
  
  <p>This is what I currently have, but it's the wrong way, it needs to be inverted so brick 0 is at the bottom and if I add brick 31 it will be added to the top to create a stack.</p>
  
  <p><a href="https://i.stack.imgur.com/rCgey.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rCgey.png" alt="enter image description here"></a></p>
  
  <p>I don't think the code matters much in this case, but here it is.</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;div id="wallwrapper"&gt;
  &lt;?php 
  $brickrowclass = "";
  
  for($i=0; $i &lt;= 30; $i++)
  {
  
      if($i % 10 == 0) 
      {
          if($brickrowclass == "std") $brickrowclass = "indent";
          else $brickrowclass = "std";
          echo "&lt;div class='brickrow row{$brickrowclass}'&gt;";
      }
  
      ?&gt;
      &lt;div class="brick"&gt;
      &lt;span class="bricktitle"&gt;Brick &lt;?php echo $i;?&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;?php   
  
      if($i % 10 == 0) echo "&lt;/div&gt;";
  }
  ?&gt;
  &lt;/div&gt;
  &lt;style&gt;
  .brick{width:90px;height:40px;background-color: #AB4E4E;margin:1px;float:left;}
  .brickrow{clear:both;}
  .rowindent{margin-left:45px;}
  #wallwrapper{width:1024px;}
  &lt;/style&gt;
  </code></pre>