3-8. 網格分配的圖文排版

RWD 網格系統，參考： Bootstrap(中) 、 w3schools(英) 、 RUNOOB(中)

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

網格分配的圖文排版

<div class="container">
  <h1>新名錶新消息</h1>

  <div class="row">
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
  </div>

  <div class="row">
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
  </div>

  <div class="row">
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
  </div>

  <div class="row">
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
  </div>

</div>

調整 CSS 樣式

設計 h2 標題文字的樣式。

設計 p 段落文字左右對齊。

設計在手機版時，表現的順序：標題文字 > 說明文字 > 圖片。

設計在桌機版時，圖文表現的樣式。[規劃說明]

[下一步]

[下一步]

[下一步]

[下一步]

[下一步]

最後，觀察考量並設計好有關重疊的前後順序問題 (z-index)！