title: forEach usage with bootstrap grid system
body: <p>I'm working on a blog site (in node.js), created a blog Schema, a forEach loop iterates over every blog and adds image, title,body to it : </p>
  
  <p><a href="https://i.stack.imgur.com/sdqG4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sdqG4.png" alt="like this :"></a></p>
  
  <p>Code :</p>
  
  <pre><code>   &lt;% blog.forEach(function(blog) { %&gt;
  
        &lt;div class="col-md-4 col-sm-6"&gt;
  
                  &lt;a href="/blog/&lt;%= blog._id %&gt;"&gt;&lt;img src="&lt;%= blog.image %&gt;"&gt;&lt;/a&gt;
              &lt;div class="caption"&gt;
                  &lt;a href="/blog/&lt;%= blog._id %&gt;"&gt;&lt;h2&gt;&lt;%= blog.title %&gt;&lt;/h2&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;span&gt;&lt;%= blog.created.toDateString(); %&gt;&lt;/span&gt;
  
              &lt;div class="relative"&gt;
              &lt;p&gt;&lt;%- blog.body.substring(0,250); %&gt;&lt;/p&gt;
              &lt;div class="absolute"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
         &lt;/div&gt;
  
      &lt;% }) %&gt;
  </code></pre>
  
  <p>Because I've applied forEach, all blog posts have the same appearance.</p>
  
  <p>Is there any chance that the 4th and 5th blog posts appear in different ways(col-md-6, i.e they both occupy half the space of the row)?</p>