Change layout of every two divs with PHP - php

Question

I'm currently wrapping every two divs in a parent row with php, which is working great.
However what I need to do is have it so that the 3rd & 4th, 7th & 8th etc divs have a different layout. This is currently my code to wrap every two divs in a parent row.
<?php
if( have_rows('products') ) :
$counter = 1;
$i = 0;
?>
<div class="o-table l-grid-half">
<?php while( have_rows('products') ) :
the_row();
if ($i > 0 && ($i % 2 == 0)) {
// close row and open new row
?>
</div>
<div class="o-table l-grid-half">
<?php } ?>
<div class="o-table-cell l-grid-half__item ">
<div class="o-table-cell l-grid-half__item ">
<img src="<?php the_sub_field('product_image'); ?>"/>
</div>
<div class="o-table-cell o-table-vt l-grid-half__item o-full-sm-pd o-roman l-product__item o-bg-item-<?php echo($counter);?>">
<h3 class="hd-panel-sm"><?php the_sub_field('product_heading'); ?></h3>
<?php the_sub_field('product_summary'); ?>
<i class="icon-right-open"></i><span>Find out more</span>
</div>
</div>
<?php
$i++;
$counter++;
endwhile;
?>
</div>
<?php endif;
?>
Everything I have tried to wrap it into the existing code has broken the script.
The end goal I would like the html to look like this (simplified version):
<div class="o-table im-the-parent-row">
<div class="o-table-cell im-the-child-div">
<img src="img-on-the-left.jpg"/>
<p>text on the right</p>
</div>
<div class="o-table-cell im-the-child-div">
<img src="img-on-the-left.jpg"/>
<p>text on the right</p>
</div>
</div>
<div class="o-table im-the-parent-row">
<div class="o-table-cell im-the-child-div">
<p>text on the left</p>
<img src="img-on-the-right.jpg"/>
</div>
<div class="o-table-cell im-the-child-div">
<p>text on the left</p>
<img src="img-on-the-right.jpg"/>
</div>
</div>
Updated code:
<?php
if( have_rows('products') ) :
$counter = 1;
$i = 0;
?>
<div class="o-table l-grid-half">
<?php while( have_rows('products') ) :
the_row();
if ($i > 0 && ($i % 2 == 0)) {
// close row and open new row
?>
</div>
<div class="o-table l-grid-half">
<?php } ?>
<!--Row 3&4, 7&8 have the image on the left -->
<?php if($i > 0 && (($i % 4 == 0) || (($i+1) % 4 == 0))) { ?>
<div class="o-table-cell l-grid-half__item ">
<div class="o-table-cell o-table-vt l-grid-half__item o-full-sm-pd o-roman l-product__item o-bg-item-<?php echo($counter);?>">
<h3 class="hd-std-sm"><?php the_sub_field('product_heading'); ?></h3>
<?php the_sub_field('product_summary'); ?>
<i class="icon-right-open"></i><span>Find out more</span>
</div>
<div class="o-table-cell l-grid-half__item ">
<img src="<?php the_sub_field('product_image'); ?>"/>
</div>
</div>
<?php } else {?>
<!--Row 1&2, 5&6 have the image on the right -->
<div class="o-table-cell l-grid-half__item ">
<div class="o-table-cell l-grid-half__item ">
<img src="<?php the_sub_field('product_image'); ?>"/>
</div>
<div class="o-table-cell o-table-vt l-grid-half__item o-full-sm-pd o-roman l-product__item o-bg-item-<?php echo($counter);?>">
<h3 class="hd-std-sm"><?php the_sub_field('product_heading'); ?></h3>
<?php the_sub_field('product_summary'); ?>
<i class="icon-right-open"></i><span>Find out more</span>
</div>
</div>
<?php } ?>
<?php
$i++;
$counter++;
endwhile;?>
</div>
<?php endif;
?>

Answer 1

This code gives you a "true" when $i is multiple of 4:
($i > 0 && ($i % 4 == 0)) # -> 4rd, 8th, etc
You can then shift $i to get the 3rd and 7th itens:
($i > 0 && ($i+1) % 4 == 0) # -> 3rd, 7th, etc
EDIT - To get both cases at once:
if($i > 0 && (($i % 4 == 0) || (($i+1) % 4 == 0))) {
/* do something... when $i = 3,4,7,8,11,12,... */
}

Answer 2

Take one variable starts with 1
Increment with every loop... 1 2 3 4
After 4 move back to 1
When its 3 and 4 you can write your custom code.
(You can save as variable or in session as you wish)