Solution 1 :

Use nested loops. The outer loop counts by 5, then two inner loops that print two elements and then three elements.

$len = count($list);
for($i = 0; $i < $len; $i += 5) {
    echo '<div class="row double">';
    for ($j = $i; $j < min($len, $i+2); $j++) {
        echo '<div class="col-lg-6 col-12">' . $list($j) . '</div>';
    }
    echo '</div>';
    if ($j >= $len) {
        break;
    }
    echo '<div class="row triple">';
    for (; $j < min($len, $i + 3); $j++) {
        echo '<div class="col-lg-4 col-12">' . $list($j) . '</div>';
    }
    echo '</div>';
}

Problem :

I’m trying to wrap every two elements in a div, and then every three elements in a div within a foreach loop. I’ve seen a lot of posts in regards to wrapping every 2, or 3, but I need alternating layouts for every group of twos and every group of threes.

This is the code I’ve tried to get working:

<?php $row = 2; ?>
        <?php $count = 0; ?>
        <?php $i=1;foreach($list as $item) : ?>

            <?php if($count % $row == 0) : ## start 2 row ?>
                <?php $endrow = 1; ?>
                <div class="row double">
            <?php endif; ?>
                    <div class="col-lg-6 col-12">
                        aaa
                    </div>
            <?php if($count % $row == $endrow) : ## end 2 row ?>
                </div>
                <?php $i = 0; ?>
                <?php $row = 3; ?>
                <?php $endrow = 2; ?>
            <?php endif; ?>


            <?php if($count % $row == 0) : ## start 3 row ?>
                <?php $endrow = 2; ?>
                <div class="row triple">
            <?php endif; ?>
                    <div class="col-lg-4 col-12">
                        bbb
                    </div>
            <?php if($count % $row == $endrow) : ## end 3 row ?>
                </div>
                <?php $i = 0; ?>
                <?php $row = 2; ?>
                <?php $endrow = 1; ?>
            <?php endif; ?>


        <?php $count++;$i++;endforeach; ?>

And this is the output:

<div class="row double">
    <div class="col-lg-6 col-12"> aaa </div>
<div class="row triple">
    <div class="col-lg-4 col-12"> bbb </div>
    <div class="col-lg-6 col-12"> aaa </div>
    <div class="col-lg-4 col-12"> bbb </div>
<div class="row double">
    <div class="col-lg-6 col-12"> aaa </div>
<div class="row triple">
    <div class="col-lg-4 col-12"> bbb </div>
    <div class="col-lg-6 col-12"> aaa </div>
    <div class="col-lg-4 col-12"> bbb </div>
<div class="row double">
    <div class="col-lg-6 col-12"> aaa </div>
<div class="row triple">
    <div class="col-lg-4 col-12"> bbb </div>
    <div class="col-lg-6 col-12"> aaa </div>
    <div class="col-lg-4 col-12"> bbb </div>
<div class="row double">
    <div class="col-lg-6 col-12"> aaa </div>
<div class="row triple">
    <div class="col-lg-4 col-12"> bbb </div>

But this is what I’m trying to achieve:

<div class="row double">
    <div class="col-lg-6 col-12"> aaa </div>
    <div class="col-lg-6 col-12"> aaa </div>
</div>
<div class="row triple">
    <div class="col-lg-4 col-12"> bbb </div>
    <div class="col-lg-4 col-12"> bbb </div>
    <div class="col-lg-4 col-12"> bbb </div>
</div>
<div class="row double">
    <div class="col-lg-6 col-12"> aaa </div>
    <div class="col-lg-6 col-12"> aaa </div>
</div>
<div class="row triple">
    <div class="col-lg-4 col-12"> bbb </div>
    <div class="col-lg-4 col-12"> bbb </div>
    <div class="col-lg-4 col-12"> bbb </div>
</div>
<div class="row double">
    <div class="col-lg-6 col-12"> aaa </div>
    <div class="col-lg-6 col-12"> aaa </div>
</div>

Any help, or pointing in the right direction would be greatly appreciated!!

Comments

Comment posted by Leanne Seawright

Thanks so much, that worked – although the second for loop is missing $j = $i 🙂

Comment posted by Barmar

The second loop doesn’t restart from

By