### 題目

利用 [Bootstrap 網格系統](https://getbootstrap.com/docs/5.3/layout/grid/) 做出響應式排版：任務中已提供 HTML 的部分，請同學新增 Bootstrap class 將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，並在圖片下方應用[通用類別的文字](https://getbootstrap.com/docs/5.3/utilities/text/#font-size)新增不同大小的文字，如圖所示：
>桌機尺寸時設為四個一排
>

>平板尺寸時設定為兩個一排
>

>手機尺寸時設定為一個一排
>

### HTML

>此 HTML 會出現 x 軸，可理解 [Containers](https://getbootstrap.com/docs/5.3/layout/containers/#how-they-work) 與 [格線系統](https://getbootstrap.com/docs/5.3/layout/grid/#how-it-works) 的相關知識，再次修改下方程式碼避免**雷點** x 軸 出現。

<div class="...">
  <div class="row">
    <div class="...">
      <img class="img-fluid" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片1<h2>
    </div>
    <div class="...">
      <img class="img-fluid"  src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片2<h2>
    </div>
    <div class="...">
      <img class="img-fluid"  src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片3<h2>
    </div>
    <div class="...">
      <img class="img-fluid"  src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        <h2 class="...">圖片4<h2>
    </div>
  </div>
</div>

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/jmimiding4104/pen/OJBdvBb
-->

回報區
---

| # | Discord | CodePen / 答案 |
|:-------------------:|:-------------------:|:------------------------------------------------------------------:|
| 01 | ann6212 |[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/eYQwzze)|
| 02 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/OJaeXRV) |
| 03 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/MWzMeyo) |
| 04 | Hana | [Codepen](https://codepen.io/hananalin/pen/BaGgzzo) |
| 05 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/VwVJjPN?editors=1000) |
| 06 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/MWzMeev) |
| 07 | shcopy | [codepen](https://codepen.io/shcopy/pen/PoxrzWq) |
| 08 | pinyi_9 | [codepen](https://codepen.io/Wpypy/pen/MWzMemE?editors=1100) |
| 09 | awei | [codepen](https://codepen.io/hong-wei/pen/qBQzNrQ?editors=1000) |
| 10 | bf_tsai | [codepen](https://codepen.io/BF-Tsai/pen/WNYqxjo) |
| 11 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/QWJXEvd?editors=1100) |
| 12 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/BaGgzZK?editors=1010) |
| 13 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/JjeQKye) |
| 14 | townyuan | [Codepen](https://codepen.io/townyuan/pen/XWyLKeY) |
| 15 | hebin. | [codepen](https://codepen.io/landyhsiao776/pen/bGQPeaB) |
| 16 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/XWyLKZB?editors=1000) |
| 17 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/YzRoWYm) |
| 18 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/LYXKZXK) |
| 19 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/XWyLKxx) |
|20|Moreene|[CodePen](https://codepen.io/Moreene/pen/dyQBXry)|
| 21 | jacky7035 | [CodePen](https://codepen.io/adens123/pen/xxQoOQB)|
| 22 | kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/oNQrzNg)|
| 23 | deli0529 | [Codepen](https://codepen.io/delichaomoon/pen/ZEmdpBw) |
| 24 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/ExOBgLa?editors=1000) |
| 25 | Kimi | [Codepen](https://codepen.io/kimihu91/pen/WNYmwmZ) |
| 26 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/YzRoGEN) |
| 27 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/gOQNgZM) |
| 28 | cTina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/WNYqpbd) |
| 29 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/eYQwvJb) |
| 30 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/QWJXpYz) |
| 31 | wind | [Codepen](https://codepen.io/wind7y/pen/GRwbEKa) |
| 32 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/ZEmdKrO?editors=1100) |
| 33 | rjjq | [Codepen](https://codepen.io/rjjq/pen/GRwbEPo) |
| 34 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/poQXrxY?editors=1010) |
| 35 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/oNQroQr?editors=1010) |
| 36 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/VwVJxxm) |
| 37 | Sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/QWJXVya) |
| 38 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/MWzMZRd) |
| 39 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/MWzMRWG)
| 40 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/dyQBjyq?editors=1000)
| 41 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/LYXwPwd) |
| 42 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/BaGXNvE?editors=1100) |
| 43 | Uli | [Codepen](https://codepen.io/uli1313/pen/mdQNemY) |
| 44 | Randy | [Codepen](https://codepen.io/landy510/pen/rNQXMKb?editors=1000) |
| 45 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/BaGXQjV) |
| 46 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/mdQNWbJ) |
| 47 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/QWJegeg) |
| 48 | Eden |[Codepen](https://codepen.io/iseden/pen/vYQoNpw)|
| 49 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/qBQeXqz?editors=1100) |
| 50 | m_m | [Codepen](https://codepen.io/minnn7716/pen/GRwVeEL) |
| 51 | .icesam | [Codepen](https://codepen.io/icesam/pen/ExGYyNX) |
| 52 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/ExGYZob) |
| 53 | 郭芙蘭#6374 | [Codepen](https://codepen.io/flora_Kuo/pen/dywbZwQ?editors=1100) |
| 54 | runweiting | [Codepen](https://codepen.io/weiting14/pen/BavBOrp) |
| 55 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/ExGYGer) |
| 56 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/xxmKBwq) |
| 57 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/LYMYYyO) |
| 58 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/bGOGzKv) |
| 59 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/KKbwKRK) |
| 60 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/poqvqeb) |
| 61 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/KKbpOdP) |
| 62 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/yLGYLzZ) |
| 63 | cura | [Codepen](https://codepen.io/curalin/pen/LYMpbqw?editors=1000) |
| 64 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/yLGYvOM?editors=1000) |
| 65 | Long | [Codepen](https://codepen.io/Loonng/pen/bGOENbx?editors=1010) |
| 66 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/OJrNgEp) |
| 67 | Martin | [Codepen](https://codepen.io/markyourpage/pen/xxmVNyY) |
| 68 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/abPmVeQ) |
| 69 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/rNoweMJ) |
| 70 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/rNoJbgP?editors=1000) |
| 71 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/zYyjROm?editors=1100) |

- 快速複製格式：

| 0 | user | [Codepen]() |