Как сделать сложную верстку в несколько колонок на бутстрап?

Question

[Алина Орел]

Надо сделать верстку из нескольких колонок, которые будут динамически создаваться.
Выглядеть они должны примерно таким образом:
1 колонка | 2 колонка | 3 колонка
Тут колонка шириной во все 3
Тут колонка шириной во все 3
Тут колонка шириной во все 3
1 колонка | 2 колонка | 3 колонка
Тут колонка шириной во все 3
Тут колонка шириной во все 3
Тут колонка шириной во все 3
1 колонка | 2 колонка | 3 колонка
Тут колонка шириной во все 3
Тут колонка шириной во все 3
Тут колонка шириной во все 3

Колонки создаются на основе записей в БД, количество длинных и коротких одинаково.
Сама верстка не вызывает вопросов, но основная проблема в том, что надо сделать так, чтобы сначала в строку вставали 3 маленькие, потом 3 большие. Если разбивать на 2 строки, то при получении данных из БД получается, что сначала создаются все маленькие, а после них встают большие

Answer 1

[Сергей delphinpro]

Оставьте бэкэнд в покое. Пусть просто выплевывает блоки сплошным потоком:

Answer 2

[mahmudchon]

В дополнение к решению выше, исходя из того, что "Сама верстка не вызывает вопросов", если я правильно понимаю, из базы вы получаете массив, который содержит 3 значения.
sandbox.onlinephpfunctions.com/code/98459e336b42b1...

<?php
$array = array(
    '1 колонка',
    '2 колонка',
    '3 колонка'
);

$string_1 = '';
$string_2 = '';

if(count($array) > 0) {
    
    foreach($array as $value) {
        $string_1 .= '    <div class="col">' . $value . '</div>' . PHP_EOL;
        $string_2 .= '<div class="row">' . PHP_EOL . '    <div class="col">' . $value . '</div>' . PHP_EOL . '</div>' . PHP_EOL;
    }
    
    $result = '<div class="row">' . PHP_EOL . $string_1 . '</div>' . PHP_EOL . $string_2;
    
    echo $result;
    
}

Результат:

<div class="row">
    <div class="col">1 колонка</div>
    <div class="col">2 колонка</div>
    <div class="col">3 колонка</div>
</div>
<div class="row">
    <div class="col">1 колонка</div>
</div>
<div class="row">
    <div class="col">2 колонка</div>
</div>
<div class="row">
    <div class="col">3 колонка</div>
</div>

Answer 3

[Дмитрий Дерепко]

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="row">
    <div class="col"></div>
</div>
<div class="row">
    <div class="col"></div>
</div>
<div class="row">
    <div class="col"></div>
</div>