WordPress Advanced Custom Fields Repeater, wrap every 3 divs in a row

Question

I'm using Advanced Custom Fields, and I would like to wrap every 3 divs in a row. If there is a fourth div or 2 extra then those would get wrapped in their own row. So open and close with a row.

I currently have the basic output but all my current attempts to add the counter have failed. Any help would be appreciated

<?php // wrap every 3 divs in a row

     if(get_field('triple_column_2')): ?>

     <?php while(has_sub_field('triple_column_2')):  ?>

            <div class="col-sm-4">
              <?php the_sub_field('copy'); ?>
            </div>

      <?php endwhile; ?>

     <?php endif; ?>

Answer 1

You can use this as a starting point. I haven't tested it so there might be slight problems in my logic, but this will get you most of the way there (if not all the way!).

if ( get_field( 'triple_column_2' ) ): ?>

    <?php $index = 1; ?>
    <?php $totalNum = count( get_field('triple_column_2') ); ?>

    <row>
    <?php while ( has_sub_field( 'triple_column_2' ) ): ?>


        <div class="col-sm-4">
            <?php the_sub_field( 'copy' ); ?>
        </div>
        <? if ($index % 3 == 0) : ?>
            <? if ($index < $totalNum) : ?>
                // more rows, so close this one and start a new one
                </row>
                <row>
            <? elseif ($index == $totalNum) : ?>
                // last element so close row but don't start a new one
                </row>
            <? endif; ?>

        <? endif; ?>

    <?php $index++; ?>
    <?php endwhile; ?>

<?php endif; ?>