Bootstrap 4 creates a large amount of space below the column

Question

I have this HTML code in Bootstrap 4

<div class="row">
    <!-- left part -->
    <div class="col-md-6 pr-md-5 border-right">

        <!-- main picture (hidden in mobile) -->
        <div class="row mb-3 d-none d-md-block">
            <div class="col-md-12" id="big_image">
                <img src="<?= base_url('images/zero35.png'); ?>" class="big_image polaroid">
            </div>
        </div>

        <!-- thumbnails -->
        <div class="row">
            <div class="col-md-12">
                <div id="show_thumbnails">
                    <div class="d-flex justify-content-center align-items-center pt-4">
                        <img src="<?= base_url('assets/img/ajax-loader-little.gif'); ?>">
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- end left part -->

    <!-- right part -->
    <div class="col-md-6 pl-md-5 border-right">

and this CSS:

.big_image {
    max-width: 100%;
    height: auto;
}

#big_image {
    width: 100%;
    max-width: 700px;
    height: 433px;
    margin: 0 auto;
}

When I am in md media query to up, all is working fine. The big_image container shows the images choose by clicking on one of the thumbnails contained in show_thumbnails selector which is receiving thumbnails from a view via ajax call.

But when I am in the md to down (sm) media query from the big_image and show_thumbnails there is a big amount of space.

Maybe it's due to flex visualization. However, I tried to remove the d--block on the rows with no avail. I also tried to remove the flex display in favour of display block, but nothing changed.

What am I missing?