title: Display Wordpress Loop in 4 column layout
body: <p>I'm creating a 4 column archive page template for a custom post type I created in Wordpress and I can't seem to get the posts to display properly. I'm mirroring Visual Composer's layout to match the rest of my site. After looking at <a href="https://stackoverflow.com/questions/20955818/wordpress-loop-posts-in-bootstrap-3-grid-layout?lq=1">Wordpress Loop posts in Bootstrap 3 grid layout</a> I've been able to get close with the following code:</p>
  
  <pre><code>&lt;div class="wpb_row"&gt;
      &lt;div class="col span_12"&gt;
  &lt;?php
  $args=array(
  'post_type' =&gt; 'product',
  'post_status' =&gt; 'publish',
  'posts_per_page' =&gt; -1,
  'caller_get_posts'=&gt; 1
  );
  $my_query = null;
  $my_query = new WP_Query($args);
  if( $my_query-&gt;have_posts() ) {
  echo '';
  $i = 0;
  while ($my_query-&gt;have_posts()) : $my_query-&gt;the_post();
  if($i % 4 == 0) { ?&gt; 
  
  &lt;?php
  }
  ?&gt;
  
      &lt;div  class="vc_span3 wpb_column column_container"&gt;
          &lt;div class="wpb_wrapper"&gt;
              &lt;a href="&lt;?php the_permalink() ?&gt;"&gt;&lt;img src="&lt;?php the_field('catalog_image'); ?&gt;" alt="&lt;?php the_field('product_description'); ?&gt;" /&gt;&lt;/a&gt;
      &lt;div class="wpb_text_column wpb_content_element "&gt;
          &lt;div class="wpb_wrapper"&gt;
              &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;
  &lt;h3&gt;$&lt;?php the_field('product_price'); ?&gt;&lt;/h3&gt;
  
          &lt;/div&gt; 
      &lt;/div&gt; 
          &lt;/div&gt; 
  
      &lt;/div&gt; 
  
  &lt;?php    
  if($i % 4 == 0) { ?&gt; 
  
  &lt;?php
  }
  
  $i++;
  endwhile;
  }
  wp_reset_query();
  ?&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Both the outer divs <code>wpb_row</code> and <code>col span_12</code> repeat every 4 columns. Currently it displays the posts in 4 columns but they return more than 4 posts within the row(they overflow to the next row). Ideally the layout would be like this:</p>
  
  <pre><code>&lt;div class="wpb_row"&gt;
  &lt;div class="col span_12"&gt;
  
  &lt;div class="vc_span3 wpb_column column_container"&gt;
  &lt;!--Post #1 Content--&gt;
  &lt;/div&gt;
  
  &lt;div class="vc_span3 wpb_column column_container"&gt;
  &lt;!--Post #2 Content--&gt;
  &lt;/div&gt;
  
  &lt;div class="vc_span3 wpb_column column_container"&gt;
  &lt;!--Post #3 Content--&gt;
  &lt;/div&gt;
  
  &lt;div class="vc_span3 wpb_column column_container"&gt;
  &lt;!--Post #4 Content--&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--Repeat everything in wpd_row on next row starting at Post #5 and so on --&gt;
  </code></pre>
  
  <p>Could anyone offer advice on how to correct this? Thanks in advance.</p>