forEach usage with bootstrap grid system

Question

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 :

Code :

   <% blog.forEach(function(blog) { %>

      <div class="col-md-4 col-sm-6">

                <a href="/blog/<%= blog._id %>"><img src="<%= blog.image %>"></a>
            <div class="caption">
                <a href="/blog/<%= blog._id %>"><h2><%= blog.title %></h2></a>
            </div>

            <span><%= blog.created.toDateString(); %></span>

            <div class="relative">
            <p><%- blog.body.substring(0,250); %></p>
            <div class="absolute"></div>
            </div>

       </div>

    <% }) %>

Because I've applied forEach, all blog posts have the same appearance.

Is there any chance that the 4th and 5th blog posts appear in different ways(col-md-6, ie they both occupy half the space of the row)?

Answer 1

The second parameter of the forEach callback is for index :

<% blog.forEach(function(blog, idx) { %>
<% if (idx > 3) %>
      <div class="col-md-6 col-sm-6">
<% else %>
      <div class="col-md-4 col-sm-6">