Как сделать Bootstrap столбцов одинаковой высоты?

Question

Здесь у меня есть раздел с 2 столбцами внутри строки, а внутри столбцов у меня есть карточка для каждого. Я хочу сделать так, чтобы высота столбцов была одинаковой всегда, на любом дисплее. В одном из моих дисплеев высота второй карты / столбца больше, в другом - первая. Вот что я получил:

.abouts{
    margin: 20px 20px 0 20px;
}
.about1{
    padding-right: 7px !important;
}
.about2{
    padding-left: 7px !important;
}
.abouts .card{
    border: none;
    border-radius: 0;
}
.about1>.card{
    background-color: #EEEEEF;
    background-image: url(images/transparentears.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
}
.about2>.card{
    background-color: #01D9D9;
    background-image: url(images/rosebear.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 50%;
}
.about1 button, .about2 button{
    border: 2px black solid;
    background-color: transparent;
    border-radius: 42px;
    width: 145px;
    height: 45px;   
}
.about1 .card>.card-body, .about2 .card>.card-body{
    margin: 15% 0 15% 0;
}
.about2 .card-body{
    width: 60%;
}

<div class="abouts">
      <div class="row">
        <div class="col-md-5 about1">
          <div class="card">
            <div class="card-body">
              <p>ABOUT</p>
              <h3 class="card-title">Where the <br>expectation is <br>more than money</h3>
              <button>Learn More</button>
            </div>
          </div>
        </div>
        <div class="col-md-7 about2">
          <div class="card">
            <div class="card-body">
              <h3 class="card-title">Switzerland <br>hand made</h3>
              <p class="card-text">Sed urna ante, scelerisque nec felis in, finibus placerat orci. Aliquam dictum id enim nec commodo. Interdum et malesuada fames.</p>
              <button>Get Started</button>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

, если вы используете карты, пожалуйста, посмотрите колоды карт https://getbootstrap.com/docs/4.0/components/card/#card - колоды

Answer 2

Для игры с вашим column такой же высоты в любом разрешении вы должны добавить responsive syle из media query

, который я создал на JS fiddle

/* If the browser window is smaller than 600px, make the columns stack on top of each other */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Вы можете узнать больше о медиа-запросе Здесь вы можете сделать c