對齊:
align-items是flex的屬性，能直接給row，讓內容置中or上下。
一樣加上顏色與邊框方便辨識:

 <div class="container">
        <div class="row align-items-start" style="height: 100px; background-color: aqua; border: solid #C1C0C1 1.5px;">
            <div class="col">
                One of three columns
            </div>

        </div>
        <div class="row align-items-center" style="height: 100px; background-color: aqua; border: solid #C1C0C1 1.5px;">
            <div class="col">
                One of three columns
            </div>

        </div>
        <div class="row align-items-end" style="height: 100px; background-color: aqua; border: solid #C1C0C1 1.5px;">
            <div class="col">
                One of three columns
            </div>

        </div>
    </div>

justify-content-(star，center，end，around，between，eveny)
一樣是flex屬性，能控制水平對齊，使用方法同上。

欄的換行:
每行固定12欄
超過12欄就會換行，其實就是flex的warp

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">9+4=13>12所以我會到下面去</div>
  </div>
 </div>

如果下個box想到下一行，可以直接給w-100，這樣就會直接換行。

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Order-* 1~5 能快速改變box的順序。

更詳細屬性請見:https://bootstrap5.hexschool.com/docs/5.0/layout/columns/