學習網站:w3schools.com
另外三種Grid類型與混合
https://www.w3schools.com/bootstrap/bootstrap_grid_small.asp
https://www.w3schools.com/bootstrap/bootstrap_grid_medium.asp
https://www.w3schools.com/bootstrap/bootstrap_grid_large.asp
建議直接點進去這網站，try it後，去改網頁的寬度及看看其排版效果如何。這文章只做一些說明。

總計3篇:
1.https://ithelp.ithome.com.tw/articles/10195551
2.https://ithelp.ithome.com.tw/articles/10195875
3.https://ithelp.ithome.com.tw/articles/10196050

上一篇已經講過12等比例縮放模式與向上相容這些東西了。這邊直接介紹混合的類型。
1.Tablets(sm)和Small Laptops(md)的版型
try it:https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_medium&stacked=h

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

...是html的內容(可能是p、也可能是另一個div)。
混合的方式就是直接在class裡空白鍵後再用加另一種類行的col-xx-xx，所以才會看到很多網頁div元素的class落落長。
這一行程式碼的row，在螢幕寬767以下(Extra small的範圍)會自動堆疊，在>=768px且小於991px時(Small的範圍)兩欄的內容會呈現3:9的比例。大於992px時，因為沒有宣告col-lg-x的類型會自動向上相容，都會呈現1:1的關係(6:6)

https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
2.三種混合
try it:https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_large&stacked=h

<div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">....</div>
    <div class="col-sm-9 col-md-6 col-lg-8">....</div>
<div>

Large在>=1200px時會產生效果。所以用電腦螢幕看的話，螢幕寬度從最大到最小的比例變化，4:8->6:6->3:9->疊在一起。你也可以在多一個col-xs-xx的效果，在最小時也不會疊在一起，但"可能"不是好的設計。

3.巢狀類型
try it:https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex4&stacked=h

<div class="row">
    <div class="col-sm-8">.col-sm-8
        <div class="row">
          <div class="col-sm-6">.col-sm-6</div>
          <div class="col-sm-6">.col-sm-6</div>
        </div>
    </div>
    <div class="col-sm-4">.col-sm-4</div>
</div>

這巢狀結構是row->col-8,col-4
________________________↳>row->col-6,col-6
在寬>=768px時，會呈現8:4，然後8下面又是一個6:6。<=767px，則會疊在一起。

4.Clear Floats(正確換行) clear fix
try it:https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex7&stacked=h

<div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>

如果你想在電腦上看一行分4等份，在手機看卻是2行1:1的內容的話，
同樣用一行row就好，因為電腦板上要弄一行，手機xs的部分6:6:6:6就能變兩行，但還是要注意加起來是12的倍數。
但如果"Column 2"(這個例子)內容太少的話可能會和Column 34發生重疊。
加
<div class="clearfix visible-xs"></div>
在xs(手機板)換行處。就能達成我們要的排版。xs也可以是sm,md,lg看你想要避免發生換行重疊的是哪個版型，這邊是針對4個col-xs-6做出2行可能會產生的空格。

5.Offsetting Columns(欄位留白)
try it:https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex8&stacked=h

<div class="row">
      <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
      
      <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
      .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
      </div>
</div>

想要在板形中間留空白就可以使用這個。這邊想做出個版型為內容->空白->內容2的型。
在想留白部分後面的欄位(col也就是內容2)補上col-xx-offset-x
第一個xx是xs,sm,md,lg這些，注意只要你有用到的設定就要補相應的col-xx-offset-x，不然會出錯。這邊是
col-sm-5和col-md-6使用到sm和md，就算md的類型不想留白(span=0)也要多col-md-offset-0
第二個x也是span，注意一樣要和之前一樣，一行row同個類型的版型加起來要12個span(或倍數，剛剛的clear float的例子)，這邊sm就是"col-sm-5"+"col-sm-5"+"col-sm-offset-2"。5+5+2=12
其實我覺得這方法很爛
同樣的版型我也可以用以下程式碼。

<div class="container-fluid">
    <h1>Offsetting Columns</h1>
    <p>Resize the browser window to see the effect.</p>
    <div class="row" style="background-color:lavender;">
        <div class="col-sm-5 col-md-6" style="background-color:lightgray;">.col-sm-5 .col-md-6</div>
        <div class="col-sm-2"></div>
        <div class="col-sm-5 col-md-6" style="background-color:lightcyan;">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
    </div>
</div>

使用<div class="col-sm-2"></div>不加內容就是留白了，何必用那麼多規則搞自己?=.=

6.Push And Pull - Change Column Ordering(調換順序，僅限2個column!)
try it:https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex9&stacked=h
又是一個不知道在幹嘛的class。能掉換誰在上(前)面的class。
使用條件:
1.僅限2個column
2.col-md-push-x把一開始在前面的往後推，col-md-pull-x把一開始在後面的往前拉。
3.這邊使用"col-sm-4 col-sm-push-8"也就是在sm板以上對調
4.注意不能再col-sm-4設定的sm板以前對調會出錯，EX:col-xs-8，板從小開始看，一開始就掉換的話會出錯。
5.但可以在定在比設定板型還大時才對調。EX:col-sm-8改成col-lg-8，就會拉到電腦螢幕寬才對調。

  <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
  <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>

col-sm-4就用col-sm-push-8(對調，另一個也是)

終於弄完三篇RWD的文章了，說真的。這為什麼可以這麼複雜