メディアオブジェクト（Media object） v4.0.0設定変更

【設定】

• div.media > [a.mr-3（右側のマージンを1remに） > <img>]《メディアの表示》 + {div.media-body > [h*.mt-0（上部のマージンを0に）《説明のヘッダ》 + 《説明のコンテンツ》]}《メディアの説明》
• メディア（<img>）は必ずしもリンク（<a>）で囲む必要はない
  （<a> を使用しない場合は、<img> に .mr-3 を入れる）
• ヘッダの大きさ（<h*>）は、好みで変更可能

【変更履歴】

• 【v4.0.0】
  • Flexbox（display: flex）で構築
  • メディアの配置：div.media-left は不要に
  • メディアの表示：<a> > img.media-object ⇒ a.mr-3 > <img>
  • 説明のヘッダ：h4.media-heading ⇒ h5.mt-0

【設定】

• div.media-body 内に入れ子で div.media.mt-3（上部のマージンを1remに）・・・を設定

【変更履歴】

• 【v4.0.0】
  • 子メディアの表示：div.media ⇒ div.media.mt-3

【設定】

• <a> に .align-self-start（画像を上揃えに）を追加（ブラウザ上での変化はない）

【変更履歴】

• 【v4.0.0】
  • div.media-{left|right} > <a> > img.media-object ⇒ a.align-self-start > <img>

【設定】

• <a> に .align-self-center（画像を上下中央揃えに）を追加
• メディアのコンテンツ：最後の段落要素に .mb-0（下部のマージンを0に）を入れる

【変更履歴】

• 【v4.0.0】
  • div.media-{left|right}.media-middle > <a> > img.media-object ⇒ a.align-self-center > <img>

【設定】

• <a> に .align-self-end（画像を下揃えに）を追加
• メディアのコンテンツ：最後の段落要素に .mb-0（下部のマージンを0に）を入れる

【変更履歴】

• 【v4.0.0】
  • div.media-{left|right}.media-bottom > <a> > img.media-object ⇒ a.align-self-end > <img>

【設定】

• div.media > {div.media-body > [h*.mt-0《説明のヘッダ》 + 《説明のコンテンツ》]}《メディアの説明》 + [a.ml-3 > <img>（左側のマージンを1remに）]《メディアの表示》
• 《メディアの説明》⇒《メディアの表示》の順に記載する必要がある

【変更履歴】

• 【v4.0.0】
  • メディアの配置：div.media-right は不要に

【設定】

• div.media > [a.order-2.ml-3 > <img>]《メディアの表示》+ {div.media-body.order-1 > [h*.mt-0《説明のヘッダ》 + 《説明のコンテンツ》]}《メディアの説明》
  （a.ml-3 に .order-2、div.media-body に .order-1 を入れる）

【設定】

• ul.list-unstyled > li.media
• div.media-body 内に入れ子で div.media・・・を設定することも可能

【注意】

• リストアイテムの間には空白がないので、li.media に空白ユーティリティクラスを追加する必要がある（上記の見本では真ん中のリストアイテムで上下のマージンを1remに設定）

【変更履歴】

• 【v4.0.0】
  • ul.media-list ⇒ ul.list-unstyled