如何重复增加div（顶部div和底部div）动态增加

Question

If we consider we have a wrapper div that has unknown number of tabs.

<div class="wrapper">
    <div> Tab1 </div>
    <div> Tab2 </div>
    <div> Tab3 </div>
    <div> Tab4 </div>
    <div> Tab5 </div>
    <div> Tab6 </div>
    <div> Tab7 </div>
    <div> Tab1 </div>
    <div> Tab1 </div>
</div>

How to dynamically increase Tabs Div? I want the arrangement to be like Div up, Div down then Div up, Div down etc…
Like on the image below.

Answer 1

The Solution was in the CSS By the Following Code:

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}