在while语句中显示每两个div的容器

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>