I have just created thus BEAUTIFUL loop
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="row sectionrow" onclick="void(0)">
<div class="col-sm-4 sectionrecipes" style="background-image:url('<?php echo the_field(background_image_title); ?>');">
<div class="textsmall" >
<?php the_field(titlebreak); ?>
</div>
</div>
<div class="col-sm-8">
<div class="sectionrecipes" style="background-image:url('<?php echo the_field(background_image_detail); ?>');">
<div class="textbigrecipes">
<div class="inner">
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>"><button type="button" class="btn btn-default">READ MORE</button></a>
</div>
</div>
</div>
</div>
</div>
</div>
But I would like to invert the positon of the bootstrap divs on the second post and return to orginal on the third and ....
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="row sectionrow" onclick="void(0)">
<div class="col-sm-8">
<div class="sectionrecipes" style="background-image:url('<?php echo the_field(background_image_detail); ?>');">
<div class="textbigrecipes">
<div class="inner">
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>"><button type="button" class="btn btn-default">READ MORE</button></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 sectionrecipes" style="background-image:url('<?php echo the_field(background_image_title); ?>');">
<div class="textsmall" >
<?php the_field(titlebreak); ?>
</div>
</div>
</div>
Is it possible?
1. First declare a variable Outside the loop (like as $i =1),
Then check the condition. Mode of i
example:
if($i% 2 == 0) {
-----layout First code-----
}else
{
-----layout Second code-----
}