I want to create a loop for wordpress that returns each two posts inside its own div and alternating columns every new row (see example)... Im not experimented in php enough to make this happen. I dont manage to get it working appropiatly. And see how to make the last div to bee 100% width if it does not have another column.
I would appreciate your support to make this happen since I tried many things and still no luck. (im using visual composer bootstrap classes, it does work but not as expected.This is the example I want to create
This is my code:
<?php
$args = array(
'posts_per_page' => '-1',
'post_type' => 'inversion',
'category_name' => '',
'order' => 'DESC',
'orderby' => 'DATE'
);
$the_query = new WP_Query( $args );?>
<?php if ( $the_query->have_posts() ) : ?>
<div class="vc_row">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); $i++; $imagen = get_the_post_thumbnail_url(get_the_ID(),'full'); ?>
<?php if(($i % 2) == 2) : ?>
<div class="vc_col-sm-6">
<div class="vc_row vc_row-fluid">
<div class="vc_col-sm-6 cont-izq">
<h3><?php the_title(); ?></h3>
</div>
<div class="vc_col-sm-6 cont-der" >
<a class="click-info">Más Información</a>
<div class="img-dentro kenburns-top" style="background:url(<?php echo $imagen; ?>)no-repeat; background-size:cover;">
</div>
</div>
</div>
</div>
<?php else : ?>
<div class="vc_col-sm-6">
<div class="vc_row vc_row-fluid">
<div class="vc_col-sm-6 cont-der" >
<a class="click-info">Más Información</a>
<div class="img-dentro kenburns-top" style="background:url(<?php echo $imagen; ?>)no-repeat; background-size:cover;">
</div>
</div>
<div class="vc_col-sm-6 cont-izq">
<h3><?php the_title(); ?></h3>
</div>
</div>
</div>
<?php endif; endwhile; ?>
</div>
<?php endif; ?>
<?php wp_reset_query(); ?>