Как выровнять элемент снизу в столбцах с bootstrap

Question

Я не могу выровнять изображение внизу страницы. Несмотря на то, что столбец имеет одинаковую высоту, он просто не выровнен полностью до дна.

Кодовый указатель: https://codepen.io/monsmado/pen/WNvmdOL

<div class="container">
    <div class="row">

    <div class="col-sm">
        <img src="https://via.placeholder.com/557x347" class="img-fluid">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <div class="d-sm-flex align-self-end">
            <a href="#">
                <img src="https://via.placeholder.com/31x36">
            </a>
        </div>
    </div>

    <div class="col-sm">
        <img src="https://via.placeholder.com/557x347" class="img-fluid">
        <h2>Lorem ipsum dolor sit amet consectetur</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="d-sm-flex align-self-end">
            <a href="#">
                <img src="https://via.placeholder.com/31x36">
            </a>
        </div>
    </div>

    <div class="col-sm">
        <img src="https://via.placeholder.com/557x347" class="img-fluid">
        <h2>Lorem ipsum dolor sit amet consectetur</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="d-sm-flex align-self-end">
            <a href="#">
                <img src="https://via.placeholder.com/31x36"">
            </a>
        </div>
    </div>

    </div>
</div>

Answer 1

Вы можете добавить display: flex и flex-direction: column к .col-sm и margin-top: auto к div, содержащему ваш нижний элемент:

CodePen

Если вы используете bootstrap 4, вы можете использовать класс d-flex flex-column для .col-sm div и mt-auto для нижнего элемента div:

CodePen