---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 切版任務 Day17 - RWD 運用

## 題目

沿用 Day10 的 flex 切版練習，
使其在瀏覽器寬度 576px 以下時呈現以下畫面：

<img src="https://i.imgur.com/Qb3pujv.png" width="350">

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

解答：
https://codepen.io/hexschool/pen/yLRLayj

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/GRYwKPo) |
| 2 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/wvYQwOJ) |
| 3 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/eYPQYzb) |
4|雲漢#5319|[codepen](https://codepen.io/keon981/pen/BaqrgvK?editors=1100)
| 4 | 史滴芬#4310 | [Codepen](https://codepen.io/steven870107/pen/oNaqmLZ) |
| 5 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/xxyQxKN?editors=1100) |
| 6 | Lychee KK | [Codepen](https://codepen.io/kakakala/pen/GRYwRxv) |
| 7 | 汪汪#4486 | [Codepen](https://codepen.io/hunwooooof/pen/yLRQLRr) |
| 8 | Snadra#1987 | [Codepen](https://codepen.io/mlqmhltg/pen/QWZJWVZ) |
| 9 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/JjmejxK) |
| 10 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/KKGrwZw) |
| 11 | 冬天#5215 | [Codepen](https://codepen.io/winter_/pen/LYgXEbj) |
| 12 | judy123#2363 | [Codepen](https://codepen.io/hsuantsong/pen/abRQzyJ?editors=1100) |
| 13 | 魚翅#3100 | [Codepen](https://codepen.io/Fukahire/pen/oNayzJN) |
| 14 | peihsuan#6315 | [Codepen](https://codepen.io/peihsuanlai/pen/zYmMYyx) |
| 15 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/Jjmeovr) |
| 16 | Tina02#2691 | [codepen](https://codepen.io/riifwerr-the-selector/pen/VwEVYOE) |
| 17 | Berlin#7338 | [codepen](https://codepen.io/3qberlin/pen/ExdOYLd?editors=1100) |
| 18 | 陳庭#3529 | [codepen](https://codepen.io/yuting850309/pen/RweyLZj?editors=1100) |
| 19 | Jacky7035#9423 | [codepen](https://codepen.io/adens123/pen/RweMvpx) |
| 20 | K（アギルダー）#0386 | [codepen](https://codepen.io/klay376014/pen/abRQOvY) |
| 21 | gahwa#3562 | [codepen](https://codepen.io/gahwa17/pen/RweqPGm) |
| 22 | ChaosTu#9311 | [codepen](https://codepen.io/torotu/pen/xxyQGEz?editors=1100) |
| 23 | しあわせね#0036 | [codepen](https://codepen.io/Front-end-engineer/pen/ExdOxdj?editors=1100) |
| 24 | jia yu#8896 | [codepen](https://codepen.io/fjqxaznl-the-reactor/pen/OJBaVXP?editors=1100) |
| 25 | 翔.#0859 | [codepen](https://codepen.io/energy95272z/pen/jOeQbEZ) |
| 26 | Ataraxia#9977 | [codepen](https://codepen.io/ataraxia8888/pen/wvYmMqp) |
| 27 | henrykgb#5749 | [codepen](https://codepen.io/henrymorgan666/pen/rNqQOxo) |
| 28 | 依依#6306 | [codepen](https://codepen.io/Rita-Yang/pen/KKGxNRe?editors=1100) |
| 29 | alan0350#2423 | [codepen](https://codepen.io/alan0305/pen/zYmMxNK) |
| 30 | Rochel#4754 | [codepen](https://codepen.io/rochelwang1205/pen/BaqGNwj?editors=1100) |
| 31 | vvay#4113 | [codepen](https://codepen.io/pellmssx-the-sasster/pen/VwEXgOd) |
| 32 | FiReBrO#0557 | [codepen](https://codepen.io/firebro42/pen/ExdOVQY) |
| 33 | Hao#2485 | [codepen](https://codepen.io/Seanfeb16/pen/ZEqmGXv) |
| 33 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/ExdOVRx) |
| 35 | Döng#2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/oNaQjmY?editors=1100) |
| 36 | Daisy_Li#4231 | [Codepen](https://codepen.io/lidairong-gmail-com/pen/mdzQerO) |
| 37 | N0c7iluc3n7#4390 | [Codepen](https://codepen.io/huang-yu-cheng/pen/QWZJyMe) |
| 38 | satarkuo#5736 | [Codepen](https://codepen.io/SatarKuo/pen/wvYQGMa?editors=1100) |
|39|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/abRQNRQ)|
|40|jackwu#4437|[Codepen](https://codepen.io/jackwu1588003/pen/OJBaXoQ)|
|41|Tim123#8361|[Codepen](https://codepen.io/Wangtim4/pen/LYgXRdO)|
|42|司機叔叔#2463|[Codepen](https://codepen.io/bigv5566/pen/vYVQyKP)|
|43|Akira#9996|[Codepen](https://codepen.io/Akira-Chen/pen/zYmMoqp)|
|44|Yvonne#2721|[Codepen](https://codepen.io/Evonne/pen/ZEqmLeV)
|45|HsuanTang#1349|[Codepen](https://codepen.io/HsuanTang/pen/ExdOZOa)
|46|Akira#9996|[Codepen](https://codepen.io/Akira-Chen/pen/zYmMoqp)
|47|Yuu#5361|[Codepen](https://codepen.io/alycehwy/pen/zYmMZbz)
|48|吳偉雄恩#2256|[Codepen](https://codepen.io/Bamboo1212/pen/BaqxopB?editors=1100)|
|49|wiimax#4564|[Codepen](https://codepen.io/Akira-Chen/pen/zYmMoqp)|
|50|Janet#5784|[Codepen](https://codepen.io/janetlinnn/pen/LYgXypB)
|51|snow#0255|[Codepen](https://codepen.io/snow21723/pen/gOBQWgY)|
|52|Rayo#8002|[Codepen](https://codepen.io/loborayo/pen/oNaQWRK)|
|53|浪裡小白龍#6860|[Codepen](https://codepen.io/Emillo/pen/zYmMRwR?editors=1100)|
|54|moins13#3346|[Codepen](https://codepen.io/kyechen13/pen/abRQYZx)|
|55|PoWei#8484|[Codepen](https://codepen.io/harrison-wei-lai/pen/XWxYjaB)|
|56|jun777#2468|[Codepen](https://codepen.io/js18151102/pen/GRYwdpQ?editors=1100)|
|57| Rey#1878 | [codepen](https://codepen.io/yfatgmpc-the-bold/pen/GRYwGEV) |
|58|Jennifer Chuang#3937|[Codepen](https://codepen.io/yujhen/pen/Jjmepya)|
|59|wendyli#2155 |[Codepen](https://codepen.io/rockayumitw/pen/NWOEEMY)|
| 60 | 辣椒#1002 |[Codepen](https://codepen.io/chilichen118/pen/zYmMyYx) |
| 61 | 姜承#8204 |[Codepen](https://codepen.io/Troy0718/pen/QWZJReg) |
| 62 | 兔子#6746 |[Codepen](https://codepen.io/CarrotDetector/pen/jOeQeLV) |
| 63 | liam9930#4129 |[Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/vYVvBVq) |
| 64 | Aritan#1931 |[Codepen](https://codepen.io/Aritan/pen/abRPNVY) |
| 65 | alll6z#9204 |[Codepen](https://codepen.io/A6Z/pen/ZEqVWvy) |
| 66 | SKey#9905 |[Codepen](https://codepen.io/Dale-Chien/pen/WNaLxQO) |
| 67 | 黑白兔#0684 |[Codepen](https://codepen.io/johnny329/pen/GRYPrxN) |
| 68 | 冷曄#9378 |[Codepen](https://codepen.io/HgHale/pen/JjmBdBG) |
|69| Elma#4317|[Codepan](https://codepen.io/4317/pen/rNqoyRL)
|70| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/JjmwrvZ?editors=1100) |
|71| yoyo#1003 | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/bGmQBxB) |
|72| David0799#4415 | [CodePen](https://codepen.io/David0799/pen/wvYRgwz) |
|73| jimhop#6510 | [CodePen](https://codepen.io/jimsansssss/pen/ZEqVRYO)|
|74| boki#3717 | [CodePen](https://codepen.io/boki-wang/pen/PoyXeyd)|
|75| andrew0404#4576 | [CodePen](https://codepen.io/Loonng/pen/dygQvWZ?editors=1100)|
|76| betty#0693 | [CodePen](https://codepen.io/betty-hu/pen/jOeeavd?editors=0100)|
|77| DeLi#8324 |[CodePen](https://codepen.io/delichaomoon/details/QWZzPgJ)|
|78| 張金#7225 |[CodePen](https://codepen.io/changxchieh/pen/rNqoYyZ?editors=1100)|
|79| bonnieli1414#4906 |[CodePen](https://codepen.io/bonnieli1414/pen/oNamNOX?editors=1100)|
|80| 鉦勝#8333 |[CodePen](https://codepen.io/atckmax823/pen/OJBwqXE?editors=1100)|
|81| MitA#7407 |[CodePen](https://codepen.io/qaz15996398/pen/bGmzMxx)|
|82| 長方形#9612 |[CodePen](https://codepen.io/imjjw/pen/dygaKjj)|
|83| Ting.66#0912 |[CodePen](https://codepen.io/Ting66/pen/XWxybgE?editors=1100)|
|84| weiting#3489 |[CodePen](https://codepen.io/weiting14/pen/BaqMVpb?editors=1100)|
|85| Lainie#1931 |[CodePen](https://codepen.io/Lainie88/pen/XWxOPwm)|
|86| JasonChang#7847 |[CodePen](https://codepen.io/jsonChangJava/pen/RwedPxB)|
|87| 小魚#8614 |[CodePen](https://codepen.io/gizelliang/pen/BaqbzaB?editors=1100)|
| 88 | Zhong#8917 | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/qBJvqVX) |
| 89 | Sonia Wu#7154 | [Codepen](https://codepen.io/YUJOU/pen/eYPbLaZ?editors=1100) |
|90|鄭舜仁#6606|[Codepen](https://codepen.io/randomno/pen/bGmZQxw)|
|91|penny#6214|[Codepen](https://codepen.io/penny8989/pen/PoyLVWa?editors=1100)|
|92|townyuan#2653|[Codepen](https://codepen.io/townyuan/pen/yLRwrzx)|
|92|歐陽龍龍#1061|[Codepen](https://codepen.io/dizzydog-rgb/pen/yLRrNGN)|
|93|羽毛#5463|[Codepen](https://codepen.io/KYuFeather/pen/ZEqVYob)|
|94|小華#3204|[Codepen](https://codepen.io/franfranfran/pen/oNaVJwg?editors=1100)|
|95|杰_jie#9088|[Codepen](https://codepen.io/hmj8805/pen/zYmQvww)|
| 96 | 東東#5015 | [Codepen](https://codepen.io/wearymask/pen/gOByOvY) |
| 97 | JhouHank#8132 | [Codepen](https://codepen.io/JhouHank/pen/oNaRezV) |
| 98 | 喬喬#2824 | [Codepen](https://codepen.io/joanne-wei/pen/wvYbOeZ?editors=0100) |
| 99 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/QWZXxMm) |
| 100 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/XWxLqBq) |
| 101 | 又竹#7302 | [Codepen](https://codepen.io/YO_ZU/pen/GRwKKLr) |
|102|阿榮#8277|[Codepen](https://codepen.io/codeitaday/pen/xxyvqWz?editors=1100)|
|103|lishuan#3698|[Codepen](https://codepen.io/lishuan/pen/KKrwdXR)|
|104|路人ADCB#9851|[Codepen](https://codepen.io/markyourpage/pen/MWzYVWr)|
|105|初心#9021|[Codepen](https://codepen.io/Sylviax/pen/eYQNYXb?editors=1100)|
|106|+7#8492|[Codepen](https://codepen.io/tojibom/pen/PoxPbGd)|
|107|cmlb0212|[Codepen](https://codepen.io/Chungmin0212/pen/NWExWpG?editors=1100)|
|108|慢慢來#4035|[Codepen](https://codepen.io/kikiyang/pen/rNQxyJP?editors=1100)|
|109|小明#4408|[Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/YzRpamY)|