Nov 20, 2022

# 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!!

### 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