Javascript 将列设置为与引导相等的高度。

以下是我的网页当前的外观：

我想要的是框1的高度等于框3的高度，如果有更多的文本要添加到框1或框3等等（同时框2和框4也是如此）。 我还想把每一面都短的长度延长，使其与长边的长度相同，从而使两侧（绿色框和4个框的组合）具有相同的高度

更基本的是：方框1、2、3和4的高度都相同。如果需要，4个框和绿色框都向下延伸到相同的高度，因此绿色框的高度大约是一个较小框高度的两倍

这是我目前的代码：

<div class="container">
  <div class="row">
    <div class="col-xs-6" id="big-box">
      <div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/
      </div>
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-6">
          <div class="mini-box" id="firstBox">1</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="secondBox">2</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="thirdBox">3</div>
        </div>
        <div class="col-xs-6">
          <div class="mini-box" id="fourthBox">4</div>
        </div>
      </div>
    </div>
  </div>
</div>

/*在此处插入大段落*/
1.
2.
3.
4.

使用一些基本的CSS来改变文本的外观和背景颜色等

我曾经尝试过使用Javascript、引导和CSS属性来实现这一点，但到目前为止，一切都不起作用。有什么帮助吗

---

提前感谢

我个人不喜欢引导类名称，但这与问题无关。因此，我认为您需要更改CSS：

.row {
    position: relative; // set bounds for mini-box absolute.
}
.mini-box {
    position: absolute;
    top: 0px;
    bottom: 0px;
}

---

我不太喜欢bootstrap，所以我有其他选择， flexbox。父级具有

高度：200px

中的每个孩子都是wil align，但我无法用

行中的第二个孩子来修复它。所以我用高度：95px修正了它10px的余量

.parent{
对齐项目：flex；
显示器：flex；
高度：200px；
}
第{}.child1行{
背景颜色：绿色；
颜色：#fff；
宽度：300px；
利润率：0.10px；
}
.儿童2{
背景颜色：灰色；
颜色：#fff；
利润率：0 10px 10px；
高度：95px；
}
.儿童3{
背景色：红色；
颜色：#fff；
利润率：0.10px；
高度：95px；
}
.儿童4{
背景颜色：粉红色；
颜色：#fff；
利润率：0 10px 10px；
高度：95px；
}
.儿童5{
背景色：黑色；
颜色：#fff；
利润率：0.10px；
高度：95px；
}

文本大
文本1
文本2
文本3
文本4

可能重复@halfzebra我已经尝试使用那里的答案，但由于左侧有4个框，没有一个有效。：/积分归=>Micah Godbolt responsiveversion@DannyGoodall如果还不够好，这里有另一个选择。