With Column layouts, how do you force a DIV to appear in a new column instead of following the previous DIV?

as mentioned above, we need to use column to achieve the effect of column-by-column reading.
A problem has been found that writing like this (omitting CSS), will cause DIV2 to follow DIV1. We hope that, as shown in the figure, after the end of DIV1, a blank is left behind, and DIV2 automatically creates a new column, as shown in the second figure below. Excuse me, how can it be realized?

<div id="columnContainer">
<div id="no1">balbalbla</div>
<div id="no2">bvlablabl</div>
</div>

Please help the gods, thank you

Mar.17,2021


flex

.columnContainer {
   display: flex;
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bee670-39fa1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bee670-39fa1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?