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

Question

У меня есть два объекта внутри столбца (абзац и изображение). Мне нужно изображение внизу и абзац вверху. К сожалению, я не могу найти класс начальной загрузки, который решает эту проблему. Я думал, что "align-items -ween" сделает эту работу, но это не так. "align-self-end" как класс для изображения тоже не работает.

<div class="container">
    <h1 class="display-3 text-center mb-5">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    </h1>
    <div class="row">
        <div class="col-md-6">
            <!-- I need this paragraph to stay at the top -->
            <p class="text-muted text-center">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis laudantium ducimus veritatis aliquam voluptas, maiores error inventore facere minus rem.
            </p>
            <!-- I need this image to be at the bottom of the container -->
            <img src="imgs/abc.svg" class="img-fluid" alt="" />
        </div>
        <div class="col-md-6">
            <!-- Other stuff-->
        </div>
        </div>
    </div>
</div>

Вот изображение того, что я хочу

Answer 1

Похоже, вам не хватает закрытия div, нарушающего сетку.

кодовая ручка: https://codepen.io/brooksrelyt/pen/JwQpqm

<div class="container">
    <h1 class="display-3 text-center mb-5">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    </h1>
    <div class="row">
        <div class="col-md-6">
            <!-- I need this paragraph to stay at the top -->
            <p class="text-muted text-center">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis laudantium ducimus veritatis aliquam voluptas, maiores error inventore facere minus rem.
            </p>
            <!-- I need this image to be at the bottom of the container -->
            <img src="https://via.placeholder.com/150x100" class="img-fluid" alt="" />
<!--           <img src="imgs/abc.svg" class="img-fluid" alt="" /> -->
            </div>
            <div class="col-md-6">
              <!-- Other stuff-->
              <p>Form other stuff</p>
            </div>
        </div>
    </div>
</div>

Answer 2

Вы можете применить следующий класс и стили к первому столбцу:

.space-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Пример bootply

Обратите внимание, что я исправил закрывающие теги для первого столбца в загрузочном листе (вы вложили второй столбец в первый столбец в приведенном выше коде)