Bootstrap columns in loop with php - php

Question

I'm trying to show my news block with bootstrap4 as
<div class="col-md-3">
<div class="card mb-4">
<img src="$arItem["DETAIL_PICTURE"]["SRC"]"
</div>
<div class="card mb-4">
<img src="$arItem["DETAIL_PICTURE"]["SRC"]"
</div>
</div>
<div class="col-md-3">
<div class="card mb-4">
<img src="$arItem["DETAIL_PICTURE"]["SRC"]"
</div>
<div class="card mb-4">
<img src="$arItem["DETAIL_PICTURE"]["SRC"]"
</div>
</div>
<div class="col-md-6">
<div class="card mb-big">
<img src="$arItem["DETAIL_PICTURE"]["SRC"]"
</div>
</div>
I have an array with results of database query in
$arResult["ITEMS"]
I want to do this with loop by
<? foreach ($arResult["ITEMS"] as $arItem): ?>
<?endforeach?>
I know i need to use something like
$i=0
if (i===2){
} else if ($k === 4) {
} else {}
$i++;
but how can i remove col-md-3 from loop.
<?php
$i=0
foreach ($arResult["ITEMS"] as $arItem): ?>
<div class="col-md-3">
<div class="card mb-4"></div>
</div>
if (i===2){
<div class="col-md-3">
<div class="card mb-4"></div>
</div>
}
if (i===4){
<div class="col-md-6">
<div class="card mb-4"></div>
</div>
}
I'm afraid I'm a little confused. How to show it in one loop?

Answer 1

Assuming you have 5 elements in the array, you could use %2 (modulo) to write <div class="col-md-3"> and check if it's the last element to change col-md-3 to col-md-6 and mb-4 to mb-big:
if (!empty($arResult["ITEMS"])) {
foreach ($arResult["ITEMS"] as $k => $item) {
$is_last = $k == count($arResult["ITEMS"]) - 1;
if ($k%2 == 0) {
echo '<div class="'.($is_last?'col-md-6':'col-md-3').'">';
}
echo' <div class="card '.($is_last?'mb-big':'mb-4').'"></div>';
if ($k%2 == 1) echo '</div>';
}
echo '</div>';
}
Will output (reformatted):
<div class="col-md-3">
<div class="card mb-4"></div>
<div class="card mb-4"></div>
</div>
<div class="col-md-3">
<div class="card mb-4"></div>
<div class="card mb-4"></div>
</div>
<div class="col-md-6">
<div class="card mb-big"></div>
</div>