title: Reversing the second div set order with separate class in foreach loop
body: <p>Reversing the second div set order with separate class in foreach loop.
  It will be a shelf like structure. I tried to alternate the <code>.tl</code> <code>.tr</code> class.</p>
  
  <p>OR </p>
  
  <p>Can we able to use css to align the second set.</p>
  
  <p><img src="https://i.stack.imgur.com/bBjRi.jpg" alt="enter image description here"></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;?php foreach ($products as $product) { ?&gt;
    &lt;div class="row"&gt;
      &lt;div class="shelf"&gt;
  
        &lt;div class="span4"&gt;&lt;span class="tl"&gt;
          &lt;?php if ($product['thumb']) { ?&gt;
          &lt;a href="&lt;?php echo $product['href']; ?&gt;"&gt;&lt;img src="&lt;?php echo $product['thumb']; ?&gt;" alt="&lt;?php echo $product['name']; ?&gt;" /&gt;&lt;/a&gt;
          &lt;?php } ?&gt;
          &lt;/span&gt;&lt;/div&gt;
  
        &lt;div class="span2"&gt;
          &lt;div class="name"&gt;&lt;a href="&lt;?php echo $product['href']; ?&gt;"&gt;&lt;?php echo $product['name']; ?&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;?php if ($product['price']) { ?&gt;
          &lt;div class="price"&gt;
            &lt;?php if (!$product['special']) { ?&gt;
            &lt;?php echo $product['price']; ?&gt;
            &lt;?php } else { ?&gt;
            &lt;span class="price-old"&gt;&lt;?php echo $product['price']; ?&gt;&lt;/span&gt; &lt;span class="price-new"&gt;&lt;?php echo $product['special']; ?&gt;&lt;/span&gt;
            &lt;?php } ?&gt;
          &lt;/div&gt;
          &lt;?php } ?&gt;
          &lt;div class="cart"&gt;
            &lt;input type="button" value="&lt;?php echo $button_cart; ?&gt;" onclick="addToCart('&lt;?php echo $product['product_id']; ?&gt;');" class="button" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
         &lt;div class="span2"&gt;Span 2&lt;/div&gt;
         &lt;div class="span4"&gt;&lt;span class="tr"&gt;Span4&lt;/span&gt;&lt;/div&gt;
  
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;?php } ?&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>  .shelf .tl {
      margin-left: 58px;
    }
    .shelf .tr {
      margin-left: -33px;
    }
  </code></pre>