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-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-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-5 col-lg-4"> 圖 </div>
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
  </div>

</div>

調整 CSS 樣式

設計 h2 標題文字的樣式 (字體、大小、外部留白距離 margin 前50px後15px)。

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

設計 每組.row 的 margin 下方距離 50px。

設計桌機版時表現的樣式：圖文上下微錯位、底板區塊左右錯位。[規劃說明]

[下一步]

[下一步]

[下一步]

[下一步]

[下一步]

[下一步]

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