使用Bootstrap -如何使2行(每行有两个水平列)具有相同的高度，同时保持响应

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="content">
        <!-- 第一行第一个列的内容 -->
      </div>
    </div>
    <div class="col-md-6">
      <div class="content">
        <!-- 第一行第二个列的内容 -->
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="content">
        <!-- 第二行第一个列的内容 -->
      </div>
    </div>
    <div class="col-md-6">
      <div class="content">
        <!-- 第二行第二个列的内容 -->
      </div>
    </div>
  </div>
</div>

.row {
  display: flex;
}

.content {
  flex: 1;
}