title: Wordpress posts display in Zigzag format using bootstrap
body: <p>I'm trying to display posts in the following attached format. But, Posts are displaying one after one..</p>
  
  <p><strong>Expected output :</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/hppeU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hppeU.png" alt="enter image description here"></a></p>
  
  <p>And Here is my code</p>
  
  <pre><code>&lt;?php
    $type = 'post';
    $args=array('category__in'=&gt; array(4), 'post_type' =&gt; $type, 'posts_per_page'=&gt;3, 'order'=&gt;'DESC');
    $my_query = new WP_Query($args);
    $i=1;
    while ($my_query-&gt;have_posts()) : $my_query-&gt;the_post(); ?&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-6" &lt;?php if($i%2==1){?&gt; style="float:left;" &lt;?php }?&gt; style="text-align: center;"&gt;
          &lt;figure class="pro-innerpage-img"&gt;
          &lt;?php the_post_thumbnail(); ?&gt;
          &lt;/figure&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-6"&gt;
          &lt;div class="title_content"&gt;
          &lt;h4&gt;&lt;?php the_title();?&gt;&lt;/h4&gt;
          &lt;div&gt;&lt;?php the_content(); ?&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;?php
  $i++;
  endwhile;
  wp_reset_query();
  ?&gt;
  </code></pre>
  
  <h2>Current Output screenshot</h2>
  
  <p><a href="https://i.stack.imgur.com/vOgmt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vOgmt.png" alt="enter image description here"></a></p>