ACF Odd/Even Alternate Layout with Relationship - wordpress

Question

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.
The output will look something like:
This is how I looped:
<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;">Explore this project <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></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;">Explore this project <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></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>
My Current Output looks like this:

Answer 1

This is the minimal logic for having alternate image and text row wise.
<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>
Hope this will give you an idea.