Divi 手機版排序教學：CSS 調整行動版面順序

你用 Divi 把首頁排得漂漂亮亮，桌面上左圖右文、節奏漂亮。打開手機一看，那顆最重要的「立即諮詢」按鈕，卻被擠到第三個螢幕之後，前面先跑出一張大圖和一段公司簡介。訪客在拇指還沒滑到之前，就先跳出去了。

這是 Divi 使用者最常踩到的隱形地雷：桌面上的閱讀順序，不等於手機上的閱讀順序。Divi 預設會把 Section、Row、Column 依 DOM 順序在窄螢幕由上往下堆疊。Divi 5 已提供可針對不同裝置設定的 Display Order；Divi 4 或舊版版型才需要用 CSS Flexbox 補上行動版排序。

你不需要換主題。使用 Divi 5 時，先在 Column 的 Content → Order 設定各裝置的 Display Order；若仍在 Divi 4，或版型結構不適用原生設定，再用 CSS Flexbox 的 order 屬性處理。這篇會先說明原生做法，再保留 CSS 兩步驟、踩坑清單與驗證流程。

核心重點

• Divi 手機版預設依 DOM 順序堆疊；Divi 5 可用 Column 的 Display Order 依裝置調整。
• Divi 4 的替代做法是 Flexbox order：把 Row 設成直向 flex 容器，再給每個 Column 一個 order 數字。
• CSS 兩步驟：在 Row/Column「進階 → CSS Class」貼 class 名稱，再到「Divi → Theme Options → Custom CSS」貼 media query。
• 用 Chrome DevTools 在 980px、767px 附近測試，並以實機確認觸控與版面。

這篇教學會先建立「DOM 順序與手機閱讀順序」的觀念，再說明 Divi 5 的原生 Display Order，以及 Divi 4 舊站可用的 CSS 做法。後面也會補上常見問題、無障礙與 SEO 討論、驗證流程，讓你能依網站版本處理行動版排序。

手機排序為什麼是 Divi 使用者的隱形痛點

很多人以為「響應式等於手機友善」，以為僅需版型會自動縮排，手機就沒問題了。這是把排版（layout）跟閱讀順序（reading order）搞混。RWD 解決的是「要不要換行、要不要縮小」，它不會幫你重新決定哪一塊內容先被看到。當桌面的設計是「左邊放裝飾大圖、右邊放報價表」，手機堆疊之後，大圖會先吃滿第一個螢幕，報價表被推到後面，轉換就垮了。

這件事的重要性，跟行動流量佔比直接掛鉤。根據 Statista 的全球行動網路流量追蹤（2026 年 4 月），行動裝置佔全球網站流量的比例長期維持在六成上下。Google 也在 2023 年宣告 mobile-first indexing 全面到位，亦即主要使用行動版內容進行索引；這是索引機制，不是額外的行動版排名加分。手機排序亂掉，會讓大量真實訪客較難找到重要訊息，也可能讓行動版索引內容與桌面呈現失去一致性。

你在 Visual Builder 裡拉欄位、排模組時，桌面預覽仍容易成為主要視角；行動裝置則預設依 DOM 堆疊。Divi 5 可在 Column 的 Display Order 直接重排，Divi 4 才需要回到 CSS 手動處理。

如果你還不熟悉響應式設計的整體觀念，建議先讀一遍我們寫的響應式網頁設計 RWD 基礎與AWD 自適應 vs RWD 響應式，會更清楚這篇教學在整個 RWD 體系裡的位置。

把這個觀念再濃縮一次：響應式解決「怎麼排」，排序調整解決「先看什麼」。前者是版面技術，後者是內容策略。很多 Divi 網站做得很漂亮、也確實會自動縮排，卻還是在手機上轉換率低迷，原因常常不是設計不夠美，而是閱讀順序沒有為拇指重新設計過。先用一張表把兩種思維擺在一起，你會更清楚差別在哪：

面向	桌面優先排序思維	手機優先排序思維
設計起點	先排桌面，手機被動縮排	先想手機敘事，桌面再還原層次
CTA 位置	常放在頁尾做收束	緊跟標題，進站即看到行動點
圖片角色	常做為主視覺佔第一屏	讓位給文字訊息，圖作為輔助
調整方式	改 DOM 順序（影響桌面）	用 order 僅調手機視覺
典型結果	手機上重要內容被擠到後面	手機上關鍵訊息先被看到

這張表不是要你二選一，而是點出一個事實：同一份內容可以在桌面與手機採不同的視覺順序。Divi 5 可使用原生 Display Order；Divi 4 舊站則可用 media query 與 CSS 調整。接下來會分別說明。

先搞懂：Divi 的 HTML 順序為什麼等於手機閱讀順序

要會調排序，得先知道 Divi 把你的頁面編譯成什麼樣的 HTML。你看得到的視覺版面，背後其實是一層層的 div 標籤；這些標籤的先後，就是手機上實際的閱讀順序。Divi 的版面是四層結構：

• Section（區段）：<div class="et_pb_section">，頁面裡最外層的大區塊，例如「關於我們」「服務項目」。
• Row（列）：<div class="et_pb_row">，一個 Section 裡面的一列，決定欄位數（1/2、1/3、2/3 等）。
• Column（欄）：<div class="et_pb_column">，Row 裡的一欄，裡面放模組。
• Module（模組）：Text、Image、Button、Blurb 等具體內容單位。

這四層在 HTML 裡的撰寫順序，就是 DOM 順序。桌面上的左右排列，是 CSS 用 float 或 flex 把 Column 橫向排出來的視覺效果；一旦螢幕變窄，Divi 的響應式 CSS 會把橫向排列「解除」，Column 自然就由上往下堆疊，堆疊順序完全照 DOM。你在編輯器看到的「左邊那欄」，因為在 HTML 裡寫在前面，手機就會出現在上方。

這就是為什麼「桌面左圖右文」會變成「手機上圖下文」。這不是 Bug，而是依 DOM 堆疊的結果。想改它，你有三條路：

1. 改 DOM 順序：直接在 Divi 編輯器裡把欄位順序對調，但這會連桌面版一起變動，通常不是你要的。
2. 用 Divi 5 Display Order：在 Column Settings → Content → Order 開啟響應式設定，分別指定桌機、平板與手機順序。
3. 用 CSS 重排視覺順序：在 Divi 4 或特殊結構中保留桌面 DOM，僅在手機斷點用 CSS 決定視覺先後。

Divi 5 優先走第二條；後文的 CSS 教學是 Divi 4 與特殊結構的替代方案。想更深入了解 HTML 結構與 CSS 盒模型的關係，可以搭配CSS Box Model 完全圖解一起看。

Flexbox order 屬性：一行 CSS 逆轉排列的底層邏輯

order 是 CSS Flexbox（與 Grid）提供的屬性，專門用來重新排列 flex 容器裡的子項目。MDN 對它的定義很直白：order 屬性會設定 flex 或 grid 項目在版面中的排列順序，預設值是 0，數字越小越前面。

把它拆成三個關鍵：

• 僅能作用在 flex 或 grid 容器的子項目上。父層必須先設成 display: flex 或 display: grid，order 才有反應。這是新手最常踩的雷：直接對一個普通 div 設 order: -1，什麼事都不會發生。
• 數字越小越前面，可以是負數。預設所有項目都是 order: 0，所以僅需把某一項設成 -1，它就會跳到最前面；設成 1，就會被推到所有預設項後面。
• 它僅改視覺順序，不改 DOM。這點對 SEO 與無障礙很重要：螢幕閱讀器、搜尋引擎爬蟲讀到的還是原本的 HTML 順序，order 僅調整眼睛看到的排列。這既是優點（不會破壞語意結構），也是陷阱（不要用它來「隱藏」重要內容，以為排在後面就等於不存在）。

把這三點記住，後面的兩步驟就不會寫錯。很多人把 order 寫了卻沒生效，九成是父層沒有先變成 flex 容器。下面的第二步驟 CSS 裡，會特別把「把 Row 設成直向 flex」這一步寫清楚。

兩步驟實戰：給你的 Row 一個 CSS Class，再寫一段 media query

這是整篇教學的核心。假設你的情境是：桌面版是「左圖右文」（圖在第一欄、文字加 CTA 按鈕在第二欄），你希望手機版變成「上文下圖」（先看到標題與按鈕，圖沉到最下面）。兩個步驟就夠。

第一步：在 Divi 編輯器裡，給欄位與 Row 貼 CSS Class

打開 Divi Visual Builder，點進你要調整的那個 Row（不是 Section、也不是 Module）。點 Row 上方的齒輪圖示進入 Row Settings，切到「Advanced（進階）」分頁，展開「CSS ID & Classes」。

你要設三個東西：

• 在 CSS Class 欄位，填入 mobile-reorder（這是給整個 Row 用的識別名稱）。
• 切到這個 Row 裡第一欄（放圖的那欄）的 Column Settings → Advanced → CSS ID & Classes，在 CSS Class 填 col-image。
• 切到第二欄（放文字與按鈕的那欄）的 Column Settings，在 CSS Class 填 col-content。

存檔離開編輯器。這一步僅是貼標籤，完全不會影響任何畫面。如果你還不熟 Divi 的介面操作，建議先讀過Divi 主題終極指南把後台介面摸熟，再回來做這一步會順很多。

第二步：在 Theme Options 的 Custom CSS 寫 media query

進入 WordPress 後台：Divi → Theme Options → Custom CSS（在最下方）。把這段整包貼進去：

/* Divi 手機版排序：先文後圖 */
@media (max-width: 980px) {
  .mobile-reorder.et_pb_row {
    display: flex !important;
    flex-direction: column !important;
  }
  .mobile-reorder .col-content {
    order: -1;
  }
  .mobile-reorder .col-image {
    order: 0;
  }
}

這段 CSS 在做四件事，以下逐行拆解：

• @media (max-width: 980px)：這條規則僅在螢幕寬度 ≤ 980px 時生效。980px 是 Divi 預設的「平板/手機」斷點，桌面上完全不會被觸發，所以桌面版的左圖右文不受影響。
• .mobile-reorder.et_pb_row { display: flex; flex-direction: column; }：把這個 Row 變成直向的 flex 容器。這一步是前面說的「父層要先變 flex」，少了它後面的 order 全部失效。flex-direction: column 確保欄位是上下堆疊（跟 Divi 預設一致），我們僅是要改它們的先後。
• .col-content { order: -1; }：把文字內容欄的順序設成負一，推到所有預設項前面，所以它會第一個出現。
• .col-image { order: 0; }：圖片欄維持預設零，排在文字後面。其實這行可以省略，寫出來是讓規則一目了然，之後要再加欄位也方便。

存檔，清快取，打開手機檢視。你會看到原本「上圖下文」變成「上文下圖」，桌面版完全不動。兩個步驟，這就是標題說的「2 步驟」。

如果你不想把 CSS 寫在 Theme Options（因為換主題會消失、也不太好版控），更乾淨的做法是放進Divi 5 子主題的 style.css，或用 Divi → Theme Options 引入的子主題樣式表。邏輯完全一樣，僅是存放位置不同。

三種最常見的手機版排序情境與可直接複製的 CSS

上面那個「先文後圖」僅是最常見的一種。實際做 Divi 形象網站時，最常在以下三種情境反覆用到 order。先用一張表把三種情境列出來給你全景，再各自附上可直接複製的 CSS。

情境	桌面版	手機版目標	關鍵 CSS
先文後圖	左圖右文	上文下圖	col-content { order: -1 }
CTA 上推	圖文之後才出現按鈕列	按鈕列緊跟標題之後	col-cta { order: -1 }
三欄重排	A ｜ B ｜ C	B → A → C	分別設 order: 1/0/2

情境一：先文後圖（已示範，這裡給進階版）

如果同一頁有多個 Row 都要做一樣的調整，不必每個 Row 都貼 class。你可以統一用一個 Section 層級的 class 包起來，CSS 改寫成作用在整個 Section：

@media (max-width: 980px) {
  .mobile-text-first .et_pb_row {
    display: flex !important;
    flex-direction: column !important;
  }
  .mobile-text-first .et_pb_row .et_pb_column:nth-child(2) {
    order: -1;
  }
}

這裡用 :nth-child(2) 直接指定「Row 裡的第二欄」，省掉逐欄貼 class 的功夫。代價是可讀性變差，三個月後你自己回來改，會忘記為什麼是挑第二欄。實務上通常僅在確定結構不會再動的時候才用這個寫法，結構會變的頁面，還是乖乖給欄位命名。

情境二：CTA 按鈕列上推

服務頁的典型結構是「標題 → 服務說明 → 價格 → CTA 按鈕」。桌面上一字排開沒問題，手機堆疊之後，按鈕被擠到很後面。你希望按鈕緊跟在標題後面，讓訪客一進場就看到行動點。做法是給按鈕所在的 Row 或 Column 一個 col-cta class：

@media (max-width: 980px) {
  .mobile-cta-up .et_pb_row {
    display: flex !important;
    flex-direction: column !important;
  }
  .mobile-cta-up .col-cta {
    order: -1;
  }
}

一個小提醒：CTA 上推之後，手機使用者一打開就看到按鈕，這是好事；但按鈕上方的標題必須夠清楚，讓人知道按下去會發生什麼。按鈕排序解決了「看得到」的問題，解決不了「想不想點」的問題，後者要回到文案與價值主張。如果你還沒把導覽與行動路徑想清楚，相關的完整教學在WordPress 選單設定與分類排序，把手機版的整體動線一次想好。

情境三：三欄重排成 B → A → C

三欄版面在手機上預設是 A → B → C 由上往下，但有時中間那欄（例如聯絡資訊或報價）其實是最該先被看到的。你想要 B → A → C。這時就分別給三欄 order 數字：

@media (max-width: 980px) {
  .mobile-bac .et_pb_row {
    display: flex !important;
    flex-direction: column !important;
  }
  .mobile-bac .col-a { order: 1; }
  .mobile-bac .col-b { order: 0; }
  .mobile-bac .col-c { order: 2; }
}

order 數字代表的是相對順序，不是絕對位置。A 設 1、B 設 0、C 設 2，結果就是 B(0) → A(1) → C(2)。你也可以寫成 A=10、B=1、C=20，效果一樣。實務上習慣用 10、20、30 這種有間距的數字，方便之後要在中間插一個新欄位（例如 15）而不必重排全部。

Column 重排不夠用時：Section 層級的整頁敘事重組

前面三個情境都在解決「Row 內部的欄位順序」。但更頭痛的狀況是：整個 Section 的先後要對調。例如首頁的設計是「Hero 橫幅 → 服務列表 → 客戶見證 → CTA 區塊」，桌面上這個順序很合理，但手機上你可能希望把「客戶見證」拉到「服務列表」之前，因為第三方背書比自家服務介紹更能留住首次訪客。這時候調 Column 已經不夠，你得在 Section 之間動手。

原理一樣是 Flexbox，僅是flex 容器換成頁面的主要內容包裝層。Divi 把所有 Section 包在一個內容容器裡，你僅需把這個容器設成直向 flex，再給每個 Section 一個 order 數字，就能重排整頁。做法分兩步：

1. 在每個要參與重排的 Section 的「進階 → CSS ID」欄位，填入語意化名稱，例如 section-hero、section-services、section-testimonials、section-cta。注意這次改用 CSS ID（#），因為一個頁面裡每個 Section 都應該是唯一識別的，用 ID 比用 Class 更貼近語意。
2. 到 Custom CSS 寫一段 media query，把內容容器變成 flex 容器，再指定每個 Section 的 order：

/* Section 層級的手機版重排 */
@media (max-width: 980px) {
  #main-content .et_builder_inner_content {
    display: flex !important;
    flex-direction: column !important;
  }
  #section-hero         { order: 1; }
  #section-testimonials { order: 2; }
  #section-services     { order: 3; }
  #section-cta          { order: 4; }
}

這段 CSS 把原本的「Hero → 服務 → 見證 → CTA」重排成「Hero → 見證 → 服務 → CTA」。訪客一進站先看到 Hero 標題，緊接著是客戶見證建立信任，再深入服務細節，最終才是 CTA。桌面版的 DOM 順序完全不動。

這裡有一個一定要提醒的坑：內容容器的選擇器會隨 Divi 版本變動。Divi 4 與 Divi 5 的內容包裝層 class 與 ID 不完全相同，上面用的 #main-content .et_builder_inner_content 在大多數 Divi 4 主題上有效，到了 Divi 5 你可能要改成 .et_pb_section 的共同父層。最穩妥的驗證方式，是打開 DevTools 的 Elements 面板，找到包住所有 Section 的那一層 div，把它的選擇器複製出來用。不要憑記憶寫選擇器，這是 Section 層級重排八成出錯的原因。

比較項目	Column 層級重排	Section 層級重排
適用情境	同一 Row 內的欄位對調	整頁的大區塊順序重組
flex 容器	該 Row 本身	頁面內容包裝層
用 ID 還是 Class	Class 即可	建議用 ID（唯一性高）
選擇器穩定性	高（.et_pb_row 很少變）	中（父層選擇器隨版本變）
踩坑風險	低	較高，需 DevTools 確認父層

一個保守的做法：如果僅是要調一兩個 Section 的相對順序，不必整頁都設 order。你可以僅把要往前提的 Section 設成 order: -1，其他維持預設零，這樣即使選擇器有小問題，影響範圍也比較可控。實務上的習慣是，Column 層級的調整盡量多做、Section 層級的調整盡量少做，因為後者的副作用與維護成本明顯較高。這也呼應我們在網頁排版範例裡反覆提到的原則：能在設計階段用結構解決的，就不要留到 CSS 階段用技巧硬扳。

Divi 5 優先使用原生 Display Order

Divi 5 已把 Flex Order 做成視覺設定。開啟要調整的 Column Settings，進入 Content → Order，在 Display Order 啟用響應式選項，再分別指定 Desktop、Tablet 與 Phone 的順序。數字較小的欄位會排在前面；設定完成後，仍要在前端以三種寬度驗證。這套原生 Display Order 的操作流程出自 Elegant Themes 的 Divi 5 響應式設定教學（2026 年 7 月）。

原生設定的好處是不用維護選擇器，也比較容易在編輯器看懂每個裝置的意圖。既有 Divi 4 網站可以先保留原本寫好的 CSS；升級並驗證原生 Display Order 後，再逐段移除重複規則，避免兩套排序同時生效。

不論用原生設定或 CSS，視覺順序都可能和 DOM 順序不同。關鍵標題、說明與操作元件的語意次序應先在 DOM 裡合理，再做小幅視覺調整；完成後也要用鍵盤與螢幕閱讀器路徑檢查。若 LCP 元素因版面重排而改變，可搭配Core Web Vitals 完全攻略重新測量，不要從排序方式直接推定 SEO 結果。

還有一個 Divi 5 之後特別該提的：不要再用舊版的 Row 內欄位數限制當藉口。Divi 5 對複雜巢狀結構的支援好很多，如果你發現自己為了排序硬把一堆欄位塞進同一個 Row，反而會更難維護。遇到複雜版面，寧可拆成兩個 Row，各自做 order，也不要一個 Row 塞六個欄位然後 order 數字排到很亂。

如果你還在考慮要不要從其他頁面編輯器搬到 Divi，或想知道 Divi 在市面上的相對位置，我們做過一份七大頁面編輯器深度評測，也有Divi 必裝外掛清單可以一併參考。

手機版排序踩坑清單：十個常見的出錯模式

這段是 Divi 形象網站上常見、也容易犯的十個錯。把它們整理成一張表，你寫 CSS 時對照著檢查，可以省下很多來回 debug 的時間。

#	症狀	原因	解法
1	order 寫了完全沒反應	父層 Row 沒有先設 display:flex	補上 .et_pb_row { display:flex; flex-direction:column; }
2	桌面版也被改排序了	media query 寫錯或漏了斷點	確認包在 @media (max-width:980px) 裡
3	桌機用 DevTools 看手機正常，實機打開卻沒變	快取未清（外掛、主機、CDN）	清 WP Rocket/Cloudflare/瀏覽器快取
4	同一個 class 在兩個 Row 衝突	class 名取太通用（如 col）	用頁面專屬前綴命名，如 home-col-cta
5	排序生效但版面跑掉、空隙變大	欄位本身有 margin/padding 被套用順序	連同 column 的 padding 一起檢查
6	iOS Safari 上順序與 Chrome 不同	Safari 對舊 flex 語法或 !important 解讀差異	補 !important 並測實機
7	Visual Builder 編輯時順序亂跳	編輯器覆蓋層影響顯示	退出編輯器、開無痕視窗驗證
8	排序之後某個模組點擊失效	z-index 或 absolute 定位跟 flex 衝突	檢查該模組是否 absolute，改回 static
9	SEO 檢測工具顯示標題順序異常	用 order「藏」了重要 H2，DOM 與視覺不一致	order 僅用於裝飾元素，標題別亂排
10	排序後 LCP 元素改變，分數變差	主圖被推到下方，LCP 改算到別的元素	對新 LCP 元素做載入優化

第 9 點要特別強調。order 僅改視覺、不改 DOM，螢幕閱讀器與搜尋引擎讀到的仍是原始順序。若某段內容對手機訪客沒有價值，先判斷它是否應從所有版本刪除；確有裝置條件需求時才使用顯示控制，並檢查 SEO 與無障礙後果。order 的用途，是讓同樣要被看到的內容以更合理的先後出現。

第 10 點跟效能的關聯，再次推薦把網站變慢的診斷與解法一起讀，排序調整做完後，務必回到 PageSpeed Insights 重測一次手機版的 Core Web Vitals。

無障礙與 SEO：order 改了視覺，爬蟲讀到的是什麼

這個主題值得獨立一節來談，因為它是最容易被誤用的地方。order 屬性的本質，是改變瀏覽器畫出來的視覺順序，不改變 HTML 的 DOM 順序。這句話聽起來像廢話，但它帶出一個重要後果：搜尋引擎爬蟲、螢幕閱讀器、以及所有「讀 DOM」的程式，看到的還是你在 Divi 編輯器裡拉出來的原始順序，跟你用手機眼睛看到的排列，可以完全不一樣。

這帶來兩個相反方向的風險，以下分別說明。

風險一：以為 order 可以藏內容。有人會想：「這段重複的銷售話術，手機上用 order 推到末端，等於藏起來了吧？」錯。爬蟲讀到的是 DOM，那段話在 HTML 裡仍排在前面。如果內容沒有價值，應考慮從所有版本刪除；確有裝置條件需求時才使用 display: none，並確認重要資訊、鍵盤操作與輔助技術不會因此缺失。

風險二：視覺與 DOM 不一致，傷害無障礙體驗。想像一個用螢幕閱讀器的視障訪客，他聽到的順序是 DOM 順序（標題 → 服務 → 見證 → CTA），但旁邊睜眼同伴看到的手機畫面是（標題 → 見證 → 服務 → CTA）。兩人討論「剛剛那個見證在哪裡」時會對不上。這種視覺與語意順序的背離，在 WCAG 準則 1.3.2「有意義的序列」裡是被點名的議題。正確用法，是讓視覺重排強化理解，避免顛覆理解。例如把 CTA 往前提可以強化行動方向；把價格表移到不相關的位置就該避免。

對 SEO 的實際影響要保守看。DOM 沒變時，H2、H3 與文字內容也不會因視覺排序而改變；排序本身既不是加分項，也不能保證不影響理解。手機版排序改善後，訪客可能更容易找到 CTA、重點與表單，這是可用性與轉換上的好處。不要把跳出率或停留時間直接當成 Google 已確認的排名訊號，應以 Search Console、分析工具與實際轉換資料分開觀察。

有一個特別值得注意的技術細節：LCP（Largest Contentful Paint）元素的認定。LCP 是 Core Web Vitals 裡衡量「最大內容元素何時畫出來」的指標，瀏覽器在這裡依「視覺渲染」來判斷最大元素，DOM 順序在這一步派不上用場。所以當你用 order 把原本的大圖推到下方，視覺上最大的元素可能變成另一個文字區塊或按鈕，LCP 就會改算到那個新元素上。如果那個新元素載入較慢，你的 LCP 分數可能反而變差。這就是為什麼前面踩坑表第 10 點特別提醒：做完排序調整，務必回到 PageSpeed Insights 重測，確認 LCP 元素的轉換沒有帶來意外。想把 LCP 與整體效能的關聯摸透，可以回頭讀 Core Web Vitals 完全攻略，把排序調整擺進整體效能優化的脈絡裡看。

排序之外：手機版體驗的其他必檢項目

把排序調好之後，順手把同一次檢討裡一起發現的問題處理掉。手機版體驗是一組互相牽動的指標，僅改排序、忽略其他項目，效果會被打折。每次做完 order 調整後，建議再走一遍的檢查清單有以下幾項。

• 點擊目標的尺寸。CTA 往前提之後，如果按鈕太小或彼此太近，拇指仍不好按。用實機確認可點擊區域足夠大、間距清楚，避免把不同設計系統的尺寸建議混成單一硬門檻。
• 字級與行距。桌面版讀起來舒服的字級，到手機上常常偏小。Body 文字建議至少 16px，行距 1.6 以上，標題再往上推。排序解決了「先看到什麼」，字級解決的是「看得清不清楚」。標題層級要怎麼在手機上維持節奏，可以搭配Divi 標題的手機版調校一起看。
• 橫向溢出。改了 flex 之後，偶爾會出現某個元素寬度超出螢幕、導致手機可以橫向滑動的 bug。在 Device Mode 裡用觸控模擬拖一下，確認頁面不能左右晃。
• 固定 CTA 或浮動按鈕的遮擋。如果你同時用了固定在底部的 CTA 列，排序後被推上來的內容可能被它蓋住，在內容底部多留一段 padding 給固定元素。
• 表單欄位的輸入體驗。聯絡表單若被排序推到比較顯眼的位置，更要確保每個輸入框都有正確的 type（email、tel），手機才會自動帶出對應鍵盤，輸入摩擦感會差很多。
• 圖片的行動版尺寸。被往後推的圖片，依然會被瀏覽器下載，沒有做延遲載入的話，會拖慢首屏。確認裝飾性圖片有 loading="lazy"，關鍵圖片則保留優先載入。

這些項目彼此獨立，但合在一起決定了手機版的真實體驗。把排序當成「手機版優化的入口」，而不是「做完就收工的最終一步」，你的 Divi 網站在行動裝置上的表現會明顯不同。如果想把這條維護線變成例行公事，可以參考我們在網頁設計完整指南裡整理的行動版檢查流程，搭配本篇的排序教學一起操作。

驗證流程：用 Chrome DevTools Device Mode 確認排序生效

CSS 寫完不等於做完。手機版排序一定要實機或模擬器驗證一遍。Chrome DevTools 的 Device Mode 是最輕量也最準的工具，它能模擬各種螢幕寬度與觸控行為，完整操作可參考 Chrome for Developers 的 Device Mode 文件。下面是固定的驗證流程，四個檢查點：

1. 開 DevTools，切 Device Mode。在 Chrome 打開你的頁面，按 F12（Mac 是 Cmd+Opt+I），再按左上角的手機圖示，或快速鍵 Cmd+Shift+M。頂部 dimensions 下拉選 iPhone 14 Pro 或 Pixel 7 之類的常見機型。
2. 測 980px 與 767px 附近。Divi 預設以 981px 以上為桌機、768px 至 980px 為平板、767px 以下為手機；把寬度調到邊界兩側，確認原生 Display Order 或 CSS 都按預期生效。
3. 確認桌面版沒被動到。把寬度拉回 1280px 以上，檢查桌面版排列完全跟調整前一樣。如果桌面也變了，回頭檢查 media query 有沒有寫對。
4. 開無痕視窗、退出 Visual Builder，做最終確認。Divi 的編輯器覆蓋層會擾亂排序顯示，快取外掛也會給你舊畫面。最終一次驗證，務必在沒有登入 WordPress、沒有開編輯器的狀態下做，這才是真實訪客看到的版本。

實機驗證也不能省。模擬器測的是 CSS 解析，但 iOS Safari 與 Android Chrome 對 flex 的細節處理偶爾有差異，尤其是 !important 與巢狀 flex 容器的互動。用自己與身邊親友的手機開一下頁面，是最終一道保險。實務上習慣至少在 iOS Safari、Android Chrome 各開一次，特別留意舊款小螢幕手機上的顯示，因為那才是真正邊緣條件的測試場。

進一步：把手機排序思維變成設計直覺

走到這裡，你已經能用兩個步驟調整 Divi 的手機版排序。但這裡要把視角拉高一點。手機排序不是一個技術問題，是一個設計問題。真正成熟的 RWD 工作流，不會等到版型做完了才回頭修排序，而是在設計階段就先想好「手機上的敘事順序」是什麼。

規劃一個頁面時，建議先畫手機版的線稿，再畫桌面版。理由很簡單：桌面版有空間妥協，手機版沒有。如果你先想好手機上訪客應該依序看到什麼，那麼 DOM 順序就會跟著手機敘事走，桌面版再用左右排列去還原視覺層次，需要動用 order 的地方會少很多。這個「手機優先設計」的觀念，是我們在網頁設計完整指南與網頁排版範例裡反覆強調的底層邏輯。這套手機優先的排序思維也適用於電商情境，商品資訊與結帳動線的先後安排影響更直接，想看購物網站上的實際應用，可以延伸讀 Elementor 電商 RWD 的完整做法。

換個說法：order 是一種「事後補救」的工具，它解決的是「已經做好的桌面版，手機上順序不對」這個歷史包袱。如果你正在開一個全新的頁面，最有利的做法是讓 DOM 順序本身就符合手機敘事，把最重要的訊息放在 HTML 前面，桌面版再用 CSS 把它排到你想要的位置。事前多想五分鐘，往往能省下事後五段 media query。兩種做法不衝突，新頁面用事前規劃、舊頁面用 order 補救，是實務上最習慣的組合。把這個判斷標準記下來：遇到排序問題，先問自己「這頁能不能從 DOM 結構改起」，答案往往比你想的更常是肯定。

另一個值得建立的習慣，是把排序調整文件化。每加一段 order 規則，在子主題樣式表裡留一行註解，寫清楚這個 class 服務的是哪一頁、哪個 Row、解決什麼問題。三個月後你回來改版面，這幾行註解會救你一個下午。這聽起來很瑣碎，但維護過五十頁以上的 Divi 網站就會懂，CSS 的可維護性，從來都取決於註解寫得多清楚，與程式碼本身漂不漂亮關係不大。

如果你現在還在用 Divi 預設的版型庫，想知道怎麼把這些版型有系統地管理、跨站重用，可以看我們整理的Divi Cloud 完整指南，把手機排序的 CSS 連同版型一起雲端化，之後新站直接套用，不用重寫。

六步行動方案：今天就動手調你的第一個頁面

讀完不等於會做。這六步是你現在就能執行的具體動作，建議挑你網站上流量最高的那一頁（通常是首頁或主要服務頁）來練習：

1. 開 Chrome DevTools Device Mode，把流量最高的那頁切成手機視角。從上往下滑一次，記下哪一段內容你覺得「順序不對」。
2. 回到 Divi 編輯器，找到那個 Row，給它與它的欄位貼 CSS Class（如 mobile-reorder、col-image、col-content）。
3. 到 Theme Options → Custom CSS，貼上本篇第二步驟的 media query，把 class 名稱對應改成你自己取的。
4. 存檔、清快取、在無痕視窗用手機寬度開頁面，確認排序生效、桌面版不動。
5. 跑一次 PageSpeed Insights，檢查 LCP 元素有沒有因為排序改變而跟著變。如果有，對新的 LCP 元素做載入優化。
6. 在子主題樣式表裡留一行註解，記下這段 CSS 服務的頁面與用途，建立你自己的排序文件庫。

這六步走完，你會拿到一個可複製的工作流程：挑頁、貼 class、寫 media query、驗證、測效能、留註解。第一次走大概要花半小時，第二次之後會愈做愈快，因為 media query 的模板可以重用，僅需換 class 名稱與 order 數字。建議你把第二步驟那段 CSS 存成自己的範本檔，之後每開一個新專案就帶過去，把重複的體力活壓到最低。

手機版排序這件事，技術門檻不高，兩個步驟、一段 CSS 就能學會。但它背後那個「為手機讀者重新想一遍敘事順序」的習慣，會回頭改變你做 Divi 網站的整個流程。從今天起，每次拉完一個 Row，多問自己一句：這個順序，在拇指滑動的世界裡，還說得通嗎？這句話問久了，你會發現自己不再把行動版當成桌面版的附屬品，而是一個獨立的、需要被認真設計的閱讀場景。當你的思維翻轉過來，order 這個小小的 CSS 屬性，就從一個應急的修補工具，變成你打造高轉換行動體驗的常備武器。