---
# System prepended metadata

title: Bootstrap 4 Grid
tags: [Bootstrap4, CSS]

---

# Bootstrap 4 Grid
###### tags: `CSS`, `Bootstrap4`

## Grid
1. row 永遠包在 col 外層
2. 同個 section 裡同一層級，不論單行或多行，一個 row + col-n就可以解決(利用網格系統單行12格的規則，將第二三...行擠下去)，例如:
```html=
<div class="row">
    <div class="col-12">這是第一行</div>
    <div class="col-6">這是2-1</div>
    <div class="col-2">2-2</div>
    <div class="col-12 col-md-4">md 以上第三行，以下第二行</div>
</div>
```

3. order-n 可定義元素順序為同層級第 n 個(可配合md, lg...達成不同螢幕不同位置的目的)。
4. 
