How to make all blocks the same height in bootstrap 4? On the new FLEX grid?

Question

css

Good afternoon!
I need help with the new bootstrap 4 grid, since I did not find any sensible documentation in Russian, I decided to contact you.
Let's say we have a grid:

<div class="row">
<div class="col-md-6">
<div class="card">
  <div class="card-body">
    This is some text within a card block.
  </div>
</div>
</div>
<div class="col-md-6">
<div class="card">
  <div class="card-body">
    This is some text within a card block. This is some text within a card block.
  </div>
</div>
</div>
</div>

The grid in theory displays 2 card panels in two rows.
The problem is that if the content of one panel is larger than the other, then they do not look nice one above the other, I heard that this can be fixed on the new bootstrap grid. Please tell me how?
Thanks in advance!

Answer 1

I solved the problem myself...

.row-flex, .row-flex > div[class*='col-'] { 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
 align-content: flex-start;
 flex:0;
}

.row-flex > div[class*='col-'] {
     margin:-.2px; 
}