循環排列2種不同的帖子布局

Question

我剛剛創建了美麗的循環

 <?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>

但我想在第二篇文章中將bootstrap div的位置反轉，並在第三篇文章中返回原始內容，然后...。

  <?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>

可能嗎？

Answer 1

1. First declare a variable Outside the loop (like as $i =1), 

2. 然后檢查條件。 我的模式

    example: if($i% 2 == 0) { -----layout First code----- }else { -----layout Second code----- } 

3. 遞增變量值（$ i ++）