Same-height bootstrap-4 columns on safari9

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?