■レイアウト：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タグ
リスト項目1のヘッダ
3日前

リスト項目1のコンテンツの見本です。

リスト項目1のサブコンテンツです
リスト項目2のヘッダ
3日前

リスト項目2のコンテンツの見本です。

リスト項目2のサブコンテンツです。
リスト項目3のヘッダ
3日前

リスト項目3のコンテンツの見本です。

リスト項目3のサブコンテンツです。 
  <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>