列未占一行的全高

Question

我正在尝试制作列的网格视图 这是我的代码：

.pink{
  background: pink;
}

.yellow{
  background: yellow;
}

.gray{
  background: gray;
}

.blue{
  background: blue;
}

.green{
  background: green;
}

.red{
  background: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container"> <div class="row">
    <div class="col-md-3 ">
      <div class="col-md-12 pink">test</div>
      <div class="col-md-12 yellow">test</div>
    </div>
    <div class="col-md-3">
      <div class="col-md-12 gray">test</div>
    </div>
    <div class="col-md-6 ">
      <div class="col-md-12 blue">test</div>
      <div class="col-md-6 green">test</div>
      <div class="col-md-6 red">test</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      <div class="col-md-12 green">test</div>
    </div>
    <div class="col-md-6">
      <div class="col-md-12 pink">test</div>
    </div>
    <div class="col-md-3">
      <div class="col-md-12 gray">test</div>
    </div>
  </div> 
</div>

灰色列的高度应为粉红色和黄色。
底部的粉红色列也不是全宽的 有谁知道为什么会这样？
谢谢你的帮助。