第4課 課程目標

能夠讓元素在不同裝置上面,以不同的順序顯示。

第4課 課程內容

請參考:https://getbootstrap.com/docs/5.3/layout/columns/#order-classes

第4課 作業

承接前一課的作業。

仔細看你會發現,在電腦螢幕上,中間是頭條新聞,左側是其他新聞。

按照 html 的順序邏輯(由上至下,由左至右),其他新聞的區塊順序是第一,頭條新聞的區塊順序是第二。

隨著螢幕縮小,在手機螢幕上,頭條新聞是出現在最上面的。

所以在手機螢幕上,頭條新聞的區塊順序是第一,其他新聞的區塊順序是第二。

請實作出這個效果。

除了上一課作業的要求之外,這一課作業再加上兩個要求:

  • 在平板、電腦上,其他新聞的區塊順序是第一,頭條新聞的區塊順序是第二
  • 在手機上,頭條新聞的區塊順序是第一,其他新聞的區塊順序是第二

完成這些,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 3 則留言

https://hospitable-midi-tile.glitch.me/ 交作業

按讚的人:

https://rwdpracticetime.glitch.me/