Same-height bootstrap-4 columns on safari9 - css

Question

I have a layout that looks as expected on Safari > 9. But on Safari 9, the layout is broken: it looks like this.
This is my code.
.card h4 {
min-height: 90px;
}
.card p {
font-size: 0.875rem;
}
.figure-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
}
#media (min-width: 768px) {
.card h4 {
min-height: 140px;
}
.card p {
font-size: 1.25rem;
line-height: 1.7rem;
}
.card-0 {
background: #F7F7F7;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #F9f9f9;">
<h4 class="title-four">Lorem</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #EAD2F7;">
<h4 class="title-four">Ad asperiores</h4>
<p>
Ad asperiores delectus deleniti dolorem, esse et exercitationem expedita fuga ipsam, labore maxime natus porro quam quisquam, rerum sapiente temporibus vel vitae?
</p>
</div>
</div>
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #D2EEE7">
<h4 class="title-four">consectetur adipisicing</h4>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt exercitationem explicabo neque nobis possimus quaerat suscipit? Aliquid cum ea earum enim non quod reprehenderit voluptatem. A ad id maiores unde.
</p>
</div>
</div>
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #F9f9f9;">
<h4 class="title-four">Lorem</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #EAD2F7;">
<h4 class="title-four">Ad asperiores</h4>
<p>
Ad asperiores delectus deleniti dolorem, esse et exercitationem expedita fuga ipsam, labore maxime natus porro quam quisquam, rerum sapiente temporibus vel vitae?
</p>
</div>
</div>
<div class="col-6 col-lg-4 d-flex flex-column my-lg-3 px-0 px-lg-3 ">
<div class="card p-3 pb-4 p-md-4 p-md-b-5 h-100" style="background: #D2EEE7">
<h4 class="title-four">consectetur adipisicing</h4>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt exercitationem explicabo neque nobis possimus quaerat suscipit? Aliquid cum ea earum enim non quod reprehenderit voluptatem. A ad id maiores unde.
</p>
</div>
</div>
</div>
</div>
I expect it to looks like this.
I guess the pbroblem is with flex-column. If i do not use it, the layout's structure is fine, but th columns does not have anymore same-height. I do not understand why it is cause Safari 9 supports flex-direction: column ( caniuse).
How to fix this issue?