title: ACF Odd/Even Alternate Layout with Relationship
body: <p>I'm trying to create a two column element using ACF repeater fields. The only thing is I'm trying to alternate this so that the content in the two columns switches left/right depending on the row being even or odd.</p>
  
  <p>The output will look something like:
  <a href="https://i.stack.imgur.com/UlYqb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UlYqb.jpg" alt="Expected Output"></a></p>
  
  <p>This is how I looped:</p>
  
  <pre><code>&lt;section id="projects" class="container specific-margin-1"&gt;
  
          &lt;!-- Repeater --&gt;
          &lt;div class="row"&gt;
            &lt;?php $i=0 ; if(get_field( 'featured_projects')): ?&gt;
            &lt;?php while(has_sub_field( 'featured_projects')): $i++; ?&gt;
  
              &lt;div class="row"&gt;
              &lt;?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 ): ?&gt;
                  &lt;ul&gt;
                  &lt;?php foreach( $post_objects as $post): // variable must be called $post (IMPORTANT) ?&gt;
                      &lt;?php setup_postdata($post); ?&gt;
  
                  &lt;div class="repeater_row &lt;?php if (($i % 2)==0 ): ?&gt;col-lg-3 col-md-4 col-sm-6&lt;?php else: ?&gt;col-lg-9 col-md-8 col-sm-6&lt;?php endif; ?&gt;"&gt;
                    &lt;?php if (($i % 2)==0 ): ?&gt;
                          &lt;li&gt;
                              &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;
                              &lt;h3&gt;&lt;?php the_field('project_location'); ?&gt;&lt;/h3&gt;
                              &lt;br&gt;                    
                              &lt;span&gt;&lt;?php the_field('project_area'); ?&gt;&lt;/span&gt;&lt;br&gt;                        
                              &lt;span&gt;&lt;?php the_field('project_scale'); ?&gt;&lt;/span&gt;&lt;br&gt;
                              &lt;br&gt;
                              &lt;span style="color:#EE1601;"&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;Explore this project &lt;i class="fa fa-arrow-circle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
                          &lt;/li&gt;
                    &lt;?php else: 
                          // check if the post has a Post Thumbnail assigned to it.
                          if ( has_post_thumbnail() ) {
                              the_post_thumbnail();
                          } 
                    ?&gt;
                    &lt;?php endif; ?&gt;
                  &lt;/div&gt;
  
                  &lt;div class="repeater_row &lt;?php if (($i % 2)==0 ): ?&gt;col-lg-9 col-md-8 col-sm-6&lt;?php else: ?&gt;col-lg-3 col-md-4 col-sm-6&lt;?php endif; ?&gt;"&gt;
                    &lt;?php if (($i % 2)==0 ): ?&gt;
                    &lt;?php // check if the post has a Post Thumbnail assigned to it.
                          if ( has_post_thumbnail() ) {
                              the_post_thumbnail();
                          } 
                    ?&gt;
  
                    &lt;?php else: ?&gt;
                          &lt;li&gt;
                              &lt;?php // check if the post has a Post Thumbnail assigned to it.
                                  if ( has_post_thumbnail() ) {
                                      the_post_thumbnail();
                                  } 
                               ?&gt;
  
                              &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;
                              &lt;h3&gt;&lt;?php the_field('project_location'); ?&gt;&lt;/h3&gt;
                              &lt;br&gt;                    
                              &lt;span&gt;&lt;?php the_field('project_area'); ?&gt;&lt;/span&gt;&lt;br&gt;                        
                              &lt;span&gt;&lt;?php the_field('project_scale'); ?&gt;&lt;/span&gt;&lt;br&gt;
                              &lt;br&gt;
                              &lt;span style="color:#EE1601;"&gt;&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;Explore this project &lt;i class="fa fa-arrow-circle-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;
                          &lt;/li&gt;
                    &lt;?php endif; ?&gt;
                  &lt;/div&gt;
  
                  &lt;?php endforeach; ?&gt;
  
                  &lt;/ul&gt;
  
                  &lt;?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?&gt;
  
              &lt;?php endif;?&gt;
          &lt;/div&gt;
  
            &lt;?php endwhile; ?&gt;
  
            &lt;?php endif; ?&gt;
          &lt;/div&gt;
          &lt;!-- Repeater --&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>My Current Output looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/bOoS5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bOoS5.png" alt="Current Output"></a></p>