引导程序对齐不同列中的行

使用以下布局：

绿色：行
紫色：列
蓝色、橙色、灰色：分别为一行

绿色可以在较小的屏幕上堆叠。我怎样才能实现这种布局？目前我没有绿色，所以我不能堆叠，但我可以对齐那些蓝色、橙色和灰色的行。

    <div class="row blue">
        <div class="col blue-col"></div>
        <div class="col blue-col"></div>
        <div class="col blue-col"></div>
        <div class="col blue-col"></div>
        <div class="col blue-col"></div>
   </div>
   <div class="row orange">
        <div class="col orange-col"></div>
        <div class="col orange-col"></div>
        <div class="col orange-col"></div>
        <div class="col orange-col"></div>
        <div class="col orange-col"></div>
   </div>
   <div class="row gray">
        <div class="col gray-col"></div>
        <div class="col gray-col"></div>
        <div class="col gray-col"></div>
        <div class="col gray-col"></div>
        <div class="col gray-col"></div>
   </div>

编辑：蓝色和橙色有不同的高度。

此代码有帮助吗？（忽略“jkd”，它们是我用来给出高度的占位符，您可以用您需要的任何测量值替换它们）

<body>
<div class = "container">
    <div class = "row" id = "green-row"  style = "border:3px solid green;"> 
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>
        </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
        <div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
            <div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
                jkd
            </div>
            <div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
                jkd
            </div>
            <div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
                jkd
            </div>            </div>
    </div>
</div>
<style>
    #purple-row{
        transform: translateX(50%);
    }
</style>

你也可以添加这段代码，让所有元素都具有相同的高度：

        <script>
        var all = document.getElementsByName("purple-row");
        // alert(all.length)
        maxHeight = 0
        for (var i=0,max=all.length; i < max; i++) {
            // alert(all[i].style.borderColor)
            if(all[i].offsetHeight > maxHeight){
                maxHeight = all[i].offsetHeight;
            }
        }
        alert(maxHeight)
        for (var i=0,max=all.length; i < max; i++) {
            all[i].style.height = maxHeight + "px";
        }

    </script>

引导程序对齐不同列中的行

jayredie 回答：引导程序对齐不同列中的行

大家都在问