bootstrap4.css
.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}
■レイアウト:rowとcol:カラム単位での垂直方向整列

align-self-start
align-self-center
align-self-end
  <div class="row"> 
    <div class="col align-self-start">align-self-start</div><!-- 垂直上寄せ -->
     <div class="col align-self-center">align-self-center</div><!-- 垂直中央寄せ -->
     <div class="col align-self-end">align-self-end</div><!-- 垂直下寄せ -->
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexを交差軸上で個別に整列 align-self-start

flex文字01
flex文字02(align-self-start)
flex文字03
  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-start">flex文字02(align-self-start)</div>
    <div>flex文字03</div>
  </div>
■メディアオブジェクト:media:メディアオブジェクトの上部に画像を配置

タイトル
ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
  <div class="media">
    <img class="align-self-start mr-3" alt="" src="https://via.placeholder.com/120x120/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
    </div>
  </div>