■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向上から下(flex-column)縦並びも横並びと同じ発想

flex文字01
flex文字02
flex文字03
  <div class="d-flex flex-column">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向下から上(flex-column-reverse)

flex文字01
flex文字02
flex文字03
  <div class="d-flex flex-column-reverse">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
  
■リストグループ:list-group:コンポーネント:カスタムコンテンツの リストグループ aタグ

  <section class="w-50 m-auto my-5">
    <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">リスト項目1のヘッダ</h5>
        <small>3日前</small>
      </div>
      <p class="mb-1">リスト項目1のコンテンツの見本です。</p>
      <small>リスト項目1のサブコンテンツです</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">リスト項目2のヘッダ</h5>
        <small class="text-muted">3日前</small>
      </div>
      <p class="mb-1">リスト項目2のコンテンツの見本です。</p>
      <small class="text-muted">リスト項目2のサブコンテンツです。</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">リスト項目3のヘッダ</h5>
        <small class="text-muted">3日前</small>
      </div>
      <p class="mb-1">リスト項目3のコンテンツの見本です。</p>
      <small class="text-muted">リスト項目3のサブコンテンツです。</small>
    </a>
  </div>
  </section>