Edit in JSFiddle

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row">
  <div class="col">
    <img src="https://png.pngtree.com/element_origin_min_pic/16/07/18/14578c7d11afe7d.jpg">
    <h2 class="title">Hello</h2>
    <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, dicta illo quasi quas, voluptatum earum asperiores, recusandae nemo vel voluptas odit inventore. Exercitationem, minus vero! In magni dolore atque cupiditate?</p>
  </div>
  <div class="col">
    <img src="https://sc-f1.sc946.com/view/20181123/4000096/359757/dd7af9e6ef7432d76a2c7acb8d102b52.jpg!r300x300.jpg">
    <h2 class="title">Hello</h2>
    <p class="content">World</p>
  </div>
  <div class="col">
    <img src="https://scontent-sea1-1.cdninstagram.com/vp/0c4ec2b4d7418bc12817ae3c1a6f93d0/5C604B63/t51.2885-19/s150x150/42991724_463878900772027_1822861429833728_n.jpg">
    <h2 class="title">Hello</h2>
  <p class="content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus quidem, doloremque ducimus eligendi animi aliquam aperiam libero impedit iste soluta, doloribus sit. Necessitatibus ad molestias quibusdam et sed quaerat qui sit quos ut. Possimus ratione atque rem odio assumenda molestias magnam ea quis inventore modi magni ipsam, dolorum odit voluptatem?</p>
  </div>
</div>
img {
  max-width: 100%;
}

.row {
  display: flex;
}

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.title {
  margin-top: auto;
}

.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  text-align: center;
}