Display container for every two divs in while statment - php

Question

I'm using foundation and Wordpress with Advanced Custom Field to build a services module.
I'm using the repeater field to insert the data.
Currently I have the row element outside of the while loop.
I need the div row to wrap every two "small-6 columns tgs-single-service" divs so the foundation grid displays properly. If I insert the row div in the while statement, it will wrap every single div in a row, which I do not want.
<?php if( have_rows('services_content') ):
$classNumber = 0
?>
<section class="full-width tgs-services-section">
<div class="row">
<?php while( have_rows('services_content') ): the_row(); ?>
<div class="small-6 columns tgs-single-service-<?php echo $classNumber = $classNumber + 1 ?>">
<figure class="effect-goliath">
<?php while( have_rows('service_images') ): the_row(); ?>
<img src="<?php the_sub_field('small_image');?>" srcset="<?php the_sub_field('medium_image');?> 1000w, <?php the_sub_field('large_image');?> 2000w" alt="Byoungz Poet Logo">
<?php endwhile; ?>
<figcaption>
<h3><?php the_sub_field('service_title');?></h3>
<?php the_sub_field('service_text');?>
</figcaption>
</figure>
</div><!-- end service section -->
<?php endwhile; ?>
</div><!--end row -->
</section>
<?php endif; ?>
Currently this displays as:
<div class="row">
<div class="small-6 columns tgs-service-section-1"></div>
<div class="small-6 columns tgs-service-section-2"></div>
<div class="small-6 columns tgs-service-section-3"></div>
<div class="small-6 columns tgs-service-section-4"></div>
</div>
I would like to achieve
<div class="row">
<div class="small-6 columns tgs-service-section-1"></div>
<div class="small-6 columns tgs-service-section-2"></div>
</div>
<div class="row">
<div class="small-6 columns tgs-service-section-3"></div>
<div class="small-6 columns tgs-service-section-4"></div>
</div>
Is there a way to have row wrap every two tgs-single-service divs?

Answer 1

<section class="full-width tgs-services-section">
<div class="row">
<!-- Create a counter i -->
<?php $i=1; while( have_rows('services_content') ): the_row(); ?>
<div class="small-6 columns tgs-single-service-<?php echo $classNumber = $classNumber + 1 ?>">
<figure class="effect-goliath">
<?php while( have_rows('service_images') ): the_row(); ?>
<img src="<?php the_sub_field('small_image');?>" srcset="<?php the_sub_field('medium_image');?> 1000w, <?php the_sub_field('large_image');?> 2000w" alt="Byoungz Poet Logo">
<?php endwhile; ?>
<figcaption>
<h3><?php the_sub_field('service_title');?></h3>
<?php the_sub_field('service_text');?>
</figcaption>
</figure>
</div><!-- end service section -->
<?php if($i % 2 == 0): ?><!-- Check if its divisable by 2 -->
</div>
<div class="row">
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
</div><!--end row -->
</section>

Answer 2

Declare a counter, then determine if the count is a multiple of 2:
$i = 0;
//during your loop:
if(($i % 2) == 0){
//echo opening and closing tag
}

Answer 3

Please try this:
<?php
if( have_rows('services_content') ):
$classNumber = 0
$rowPerSection = 2;
$rows = get_field('services_content');
$sections = array_chunk($rows, $rowPerSection);
?>
<?php foreach ($sections as $section): ?>
<section class="full-width tgs-services-section">
<div class="row">
<?php foreach ($section as $row): ?>
# code...
<?php endforeach; ?>
</div>
</section>
<?php endforeach; ?>
<?php endif; ?>