Javascript 在CSS/JS中排列多个div？

目前我使用的是

MDB

    <div class="row" style="margin-top: 8em;">

            <div class="col-md-6">
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-default"><b>Project 1</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-default"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-primary"><b>Project 2</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-primary"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-secondary"><b>Project 3</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-secondary"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-success"><b>Project 4</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-success"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-danger"><b>Project 5</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-danger"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-warning"><b>Project 6</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-warning"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
            </div>
    </div>

项目1
Lorem Ipsum只是印刷和排版行业的虚拟文本
86%
项目2
Lorem Ipsum只是印刷和排版行业的虚拟文本
86%
项目3
Lorem Ipsum只是印刷和排版行业的虚拟文本
86%
项目4
Lorem Ipsum只是印刷和排版行业的虚拟文本
86%
项目5
Lorem Ipsum只是印刷和排版行业的虚拟文本
86%
项目6
Lorem Ipsum只是印刷和排版行业的虚拟文本
86%

这些div的输出是这样的

如您所见，类名为

col-md-6

的两个不同div位于

行中

对于每个
col-md-6
，包含3个不同的项目

我想做的是，在不使用col-md-6的情况下安排这些div项目是否可行？只使用
JavaScript
？也有这样的安排

因为这些项目将来自我的数据库，所以在这种情况下使用
col-md-6
是个坏主意，这就是为什么我尝试用两（2）列自动排列div，即使我加载了多个div。它将像那样重新排列
看看引导卡的布局。
您可以用x张卡填充一个div。每张卡片的宽度可以通过
flex basis
在CSS中声明

这样，就不需要额外的列来使其响应。使用CSS网格时也不需要创建映射（这也是一个有效的解决方案）。不需要JavaScript解决方案

下面我用
two col
类扩展了卡片组布局。
类似地，您可以扩展到三列或四列，以此类推

SCSS

.card-deck {
    .card {
        flex-basis: 100%; // mobile first
    }

    /*@media (min-width: 768px)*/
    @include media-breakpoint-up(md) {
        &.two-col {
            .card {
                flex-basis: calc(50% - #{$grid-gutter-width}); // -30px
            }
        }
    }        
}

您可以尝试使用CSS网格来定义布局：您可以更改js中类的宽度值“因为这些项目将来自我的数据库，在这种情况下使用col-md-6是个坏主意”-为什么？不要把这样的事情说成是绝对的事实，解释一下真正的问题是什么。有没有可能你的意思是“我不知道该怎么处理”而不是“坏主意”？