Bootstrap Grid System運作流程

注意：我不確定底層到底是怎麼實作的，至少我用這個想法去看bootstrap官網的example是可以解釋的通的


Bootstrap Grid System運作流程：
1. 檢查裝置的寬度，依照不同的寬度套用xs, sm, md或lg。
2. 遇到有col-**-*的class時，由本身開始往下檢查。
3. 如果檢查到最後沒有符合，grid就會stack起來。


例子1：
例如你使用超大螢幕，然後在一個row裡面有三個grid：
<div class="col-xs-2">.col-xs-2</div>
<div class="col-xs-8">.col-xs-8</div>
<div class="col-xs-2">.col-xs-2</div>

當你瀏覽該網頁時，會先看有沒有col-lg-*，在這個例子裏面並沒有col-lg-*，所以會往下檢查有沒有col-md-*，在這裡還是沒有。
依此類推，最後發現有col-xs-*，於是就以col-xs-*作為排版，也就是以2-8-2作為外觀。



例子2：
例如你使用中等大小的螢幕(或者你用超大螢幕，然後把瀏覽器縮小成md class的大小)，以致於被瀏覽器歸類為md class，然後在一個row裡面有三個grid：
<div class="col-lg-2">.col-lg-2</div>
<div class="col-lg-8">.col-lg-8</div>
<div class="col-lg-2">.col-lg-2</div>

瀏覽器會先從col-md-*開始往下檢查，但在這個例子裡，一直到最後的col-xs-*都沒辦法找到，所以這三個grid就會stack起來