Bootstrap3 應該算是最流行的 CSS 架構了，用起來簡單，用的人也最多，用來做 RWD 響應式網頁開發也很快，對 RWD 設計，它有一個很方便的架構，但是，如果真的深入的用，就會碰到一些問題，我們就來看看一個常用的手機顯示順序與寬網頁不同時，要怎麼做的。

問題：寬網頁左右留白兩格，手機顯示順序不是右到左。

 [ ][ (2) key product 1st     ][ (1) shopping cart ][ ]
    [ (5) suggesting products ][ (3) user account  ]
    [                         ][ (4) promotion     ]

[ (1) shopping cart       ]
[ (2) key product 1st     ]
[ (3) user account        ]
[ (4) promotion           ]
[ (5) suggesting products ]

<div class="row">
  <div class="col-lg-2"></div>
  <div class="hidden-xs col-lg-2 pull-right"></div>
  <div class="col-lg-3 col-xs-12 pull-right">(1) shopping cart</div>
  <div class="col-lg-5 col-xs-12">(2) key product 1st</div>
  <div class="hidden-xs col-lg-2 pull-right"></div>
  <div class="col-lg-3 col-xs-12 pull-right">(3) user account + (4) promotion</div>
  <div id="desc" class="col-lg-5 col-xs-12 col-lg-offset-2">(5) suggesting products</div>
  <div class="col-lg-2"></div>
</div>

01: 就宣告這是一段要排版的，ROW 要怎麼介紹啊？
02: 這是寬網頁的左邊留白。
03: 這行很有趣，這是要先填上寬網頁右邊的留白，先用 pull-right，把 lg 兩格右填，這要先填，後面的 pull-right 才不會一拉就到最右邊。
04: 再用 pull-right 把 (1) 填到右邊，但是手機是第一個。
05: 接下來放寬網頁左邊的區塊，手機就會是第二個。
06~10: 就很一樣，唯一特別的是第 08 行的 col-lg-offset-2，沒這行，左邊的留白就不見了。

就這樣，你的 RWD 可以照業主要的手機與寬網頁顯示順序了。

Bootstrap 很好用，唯一的缺點是，要是不蓋掉很多它原來的設計樣式，看起來好一般啊。