Столбец div перемещается ниже столбца div с наибольшей высотой div выше

Question

Я использую цикл PHP для создания и отображения статей (в виде 'col' divs) из базы данных MySQL.Если я использую 3 "col-6", то третий переместится ниже обоих приведенных выше.Я хочу, чтобы он оставался рядом с div над ним (в этом случае первый col-6 div).Как мне этого добиться?

Я выяснил, что это проблема с колонками начальной загрузки.Также я не могу использовать абсолютное позиционирование в этом случае.

while($row=mysqli_fetch_array($run_query)){
    echo '<div class="col-md-6 col-xl-4 blogColumn">';
        echo '<a class="articleLink" href="show.php?blogId=';echo $row['id'].'" target="_blank">';
            echo '<article>';
                echo '<header>';
                    if($row['file_id']==null){
                        echo '<img class="img-fluid rounded focus" src="https://i.ibb.co/ZNDm012/logo.jpg"/>';
                    } else{
                        $fileId=$row['file_id'];
                        $q="SELECT * FROM uploads WHERE id='$fileId'";
                        $run_q=mysqli_query($con,$q) or die(mysqli_error($con));   
                        $res=mysqli_fetch_array($run_q);
                        $path="uploads/".$res['name'];
                        if($res['type']=='image'){     
                            echo '<img class="img-fluid rounded focus" src="'.$path.'"/>';
                        } else {
                            echo '<video class="articleVideo" src="'.$path.'" controls="controls">';
                            echo '</video>';
                        } }
                    echo '<h2>'.$row['title'].'</h2>';
                echo '</header>';
                echo '<p>'.substr($row['description'],0,100).'... Read More'.'</p>';
            echo '</article>';
        echo '</a>';
        echo '<hr/>';
    echo '</div>';}?>```

Answer 1

Полная ширина страницы определяется col-12. Поэтому, если вы хотите, чтобы 3 столбца одинаковой ширины были рядом, используйте col-md-4

<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>

Это приведет к появлению 3 столбцов одинаковой ширины рядом друг с другом.