聊聊程式

Grid system 依照寬度給予不同的名稱用 sm , md , lg 這三個來說明
sm 表示 當畫面寬度大於等於時576時 col-sm-? 就會生效
md 當畫面寬度大於等於時768時 col-md-? 就會生效
lg 當畫面寬度大於等於時992時 col-lg-? 就會生效
以下是標準版型
<div class="container">
  <div class="row">
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </div>
</div>
因為都沒有col所以是垂直排列
A
B
C
都加上 class="col"
會變成 自動4等份 因為 Grid system 是12格劃分
可以在col-sm-2 最後的數字 就是表示要幾分
<div class="col-sm-1   col-md-4 col-lg-2">A</div>
<div class="col-sm-10 col-md-4 col-lg-8">B</div>
<div class="col-sm-1   col-md-4 col-lg-2">C</div>
這樣在不同寬度下 每個col的寬度就會不同
當小於576時 就都不生效 變回垂直排列
當超過992時 都會是lg生效 (BS4有一個更大的xl)

push跟push得應用 (這裡用 Bootstrap 3 的)
當需要改變欄位順序時 就可以使用  
<div class="col-sm-1   col-sm-push-1   col-md-4 col-lg-2 ">A</div>
<div class="col-sm-10 col-sm-pull-10   col-md-4 col-lg-8">B</div>
<div class="col-sm-1                             col-md-4 col-lg-2">C</div>
這樣當寬度小於768 開始進入sm的顯示時
BAC 這樣顯示

 visible-lg 可以 做到當 lg 才顯示 其餘隱藏
<div class="visible-lg">visible-lg</div>
<div class="visible-md">visible-md</div>
<div class="visible-sm">visible-sm</div>
練習的時候 就知道現在是哪一個 在作用中

 Bootstrap 4 差別
xs 移除 直接用col-5
xl 加入 超過1140px

visible-lg 改比較大 請看
使用 Bootstrap 4 顯示/隱藏 HTML 元素

push and pull 改成
col-sm-push-1 => push-sm-1
col-sm-pull-10 => pull-sm-10