ACF Odd/Even Альтернативная компоновка с отношением

Question

Я пытаюсь создать элемент с двумя столбцами с использованием полей повторителя ACF. Единственное, что я пытаюсь изменить, чтобы содержимое в двух столбцах переключалось влево/вправо в зависимости от четности или нечетности строки.

Результат будет выглядеть примерно так:

Это, как я петельные:

<section id="projects" class="container specific-margin-1"> 

     <!-- Repeater --> 
     <div class="row"> 
      <?php $i=0 ; if(get_field('featured_projects')): ?> 
      <?php while(has_sub_field('featured_projects')): $i++; ?> 

      <div class="row"> 
      <?php 

      /* 
      * Loop through post objects (assuming this is a multi-select field) (setup postdata) 
      * Using this method, you can use all the normal WP functions as the $post object is temporarily initialized within the loop 
      * Read more: http://codex.wordpress.org/Template_Tags/get_posts#Reset_after_Postlists_with_offset 
      */ 
      $post_objects = get_field('featured_projects'); 

      if($post_objects): ?> 
       <ul> 
       <?php foreach($post_objects as $post): // variable must be called $post (IMPORTANT) ?> 
        <?php setup_postdata($post); ?> 

       <div class="repeater_row <?php if (($i % 2)==0): ?>col-lg-3 col-md-4 col-sm-6<?php else: ?>col-lg-9 col-md-8 col-sm-6<?php endif; ?>"> 
        <?php if (($i % 2)==0): ?> 
         <li> 
          <h3><?php the_title(); ?></h3> 
          <h3><?php the_field('project_location'); ?></h3> 
          <br>      
          <span><?php the_field('project_area'); ?></span><br>       
          <span><?php the_field('project_scale'); ?></span><br> 
          <br> 
          <span style="color:#EE1601;"><a href="<?php the_permalink(); ?>">Explore this project <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></span> 
         </li> 
        <?php else: 
         // check if the post has a Post Thumbnail assigned to it. 
         if (has_post_thumbnail()) { 
          the_post_thumbnail(); 
         } 
        ?> 
        <?php endif; ?> 
       </div> 

       <div class="repeater_row <?php if (($i % 2)==0): ?>col-lg-9 col-md-8 col-sm-6<?php else: ?>col-lg-3 col-md-4 col-sm-6<?php endif; ?>"> 
        <?php if (($i % 2)==0): ?> 
        <?php // check if the post has a Post Thumbnail assigned to it. 
         if (has_post_thumbnail()) { 
          the_post_thumbnail(); 
         } 
        ?> 

        <?php else: ?> 
         <li> 
          <?php // check if the post has a Post Thumbnail assigned to it. 
           if (has_post_thumbnail()) { 
            the_post_thumbnail(); 
           } 
          ?> 

          <h3><?php the_title(); ?></h3> 
          <h3><?php the_field('project_location'); ?></h3> 
          <br>      
          <span><?php the_field('project_area'); ?></span><br>       
          <span><?php the_field('project_scale'); ?></span><br> 
          <br> 
          <span style="color:#EE1601;"><a href="<?php the_permalink(); ?>">Explore this project <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></span> 
         </li> 
        <?php endif; ?> 
       </div> 

       <?php endforeach; ?> 

       </ul> 

       <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?> 

      <?php endif;?> 
     </div> 

      <?php endwhile; ?> 

      <?php endif; ?> 
     </div> 
     <!-- Repeater --> 
</section> 

Мой выходной ток выглядит следующим образом:

Answer 1

Это минимальный логика для альтернативного изображения и текстовой строки.

<div class="container"> 
    <div class="row"> 
     <?php 
     for ($i = 1; $i <= 10; $i++) 
     { 
      //even counter will have right image 
      if ($i % 2 == 0) 
      { 
       ?> 
       <div class="col-md-12"> 
        <div class="col-md-4"> 
         Title Number: <?php echo $i; ?> 
        </div> 
        <div class="col-md-8"> 
         <img src="" class="img-responsive"/> 
        </div> 
       </div> 
       <?php 
      } 
      //odd counter will have left image 
      else 
      { 
       ?> 
       <div class="col-md-12"> 
        <div class="col-md-8"> 
         <img src="" class="img-responsive"/> 
        </div> 
        <div class="col-md-4"> 
         Title Number: <?php echo $i; ?> 
        </div> 
       </div> 
       <?php 
      } 
     } 
     ?> 
    </div> 
</div> 

Надеюсь, это даст вам представление.