Bootstrapで左右幅を決め、左側にロゴ、右側にメニューや電話番号というような配置のヘッダーを作成することが少なくありません。

ヘッダー全体の高さを指定していなければ、左右のいずれかのボリューミーなほうのコンテンツによってヘッダー全体の高さが決まります。

このままだと、左右いずれか、高さの小さい方のコンテンツは上から配置（上揃え）されるのですが、下を揃えたいという場合も少なくありません。

ところが、多くの場合は、divタグで左右を分けますので、ボックス自体には高さがなく、こんな簡単な配置にも意外と手間取ったりします。

そこで

1. Bootstrapで左右を２つのボックスに分割
2. 左右それぞれのボックスの高さを同じにする
3. ボックス内のアイテムを下配置（下揃え）にする

というスタイルの設定を今どきのflex属性でやってみます。

htmlは

<div class="row wrapper">
  <div class="col-6 left">
    <h1 id="headerLogo"> <a href="/"><img src="" alt=""></a></h1>
  </div>
  <div class="col-4 right">
    <div class="tel">000-0000-0000</div>
    <div class="address">○○町1丁目1-1</div>
  </div>
</div>

cssは

.wrapper {
  display: flex; /* 親要素にflexを指定するだけで子要素の高さが大きい方に合わせて統一される */
}
.right {
  display: flex;
  flex-direction: column; /* 縦並びの指定 */
  text-align: right;
}
.right > div:first-child {
  margin-top: auto; /* ボックス内にさらに複数の縦並びボックス配置の一番上だけに適用 */
}