卡片与卡片项目相同的高度

Question

IE11中的Bootstrap 4卡牌，卡片上的高度相等。

我也试图在IE11中做THIS，但在IE11中，我看起来像THIS。我错过了什么？
重要的是，卡片在它们所在的行中保持相同的高度。
或者这样做是错误的方法吗？ 我的html和css是这样的：

card-deck .card {
  margin-bottom: 30px;
  display: flex;
}

@media(min-width:992px) {
  .card-deck .card {
    width: calc((33.33%) - (30px));
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex: initial;
    -webkit-flex: initial;
    flex: initial;
  }
}

@media(max-width:991px) {
  .card-deck .card {
    width: calc((50%) - (30px));
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    flex: initial;
  }
}

@media(max-width:575px) {
  .card-deck .card {
    width: 100%;
  }
}

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="http://placehold.it/288x200/" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="http://placehold.it/288x200/" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="http://placehold.it/288x200/" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="http://placehold.it/288x200/" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="http://placehold.it/288x200/" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>


.