Divi 手機版排序教學：2 步驟用 CSS 調整行動版面順序
Divi 手機版排序無法用介面上的拖拉單獨修改，因為桌機、平板、手機在 RWD 架構下共用同一份 HTML，一旦在 Row 內搬動模組就會三種裝置一起連動。唯一不影響電腦版面的做法…
Divi 手機版排序的調整方式：用 CSS flexbox order 改手機、不動桌機
Divi 手機版排序無法用介面上的拖拉單獨修改，因為桌機、平板、手機在 RWD 架構下共用同一份 HTML，一旦在 Row 內搬動模組就會三種裝置一起連動。唯一不影響電腦版面的做法，是進 Row 內每個模組的 Custom CSS > Main Element，切到 Phone 分頁，貼上 CSS flexbox 的 order 語法，數字越小越早出現，全程不必安裝任何外掛。根據 Elegant Themes 官方文件的說明，這條路徑正是 Custom CSS 欄位的設計用途之一。熟悉 Divi 主題終極完整教學 的基礎設定後，整段調整大約十分鐘內可以跑完。
重點先看：Divi 原生沒有 per-device 模組排序開關，桌機平板手機共用一份 HTML，這是 RWD 共用結構的必然結果；把 order 語法貼在 Custom CSS 的 Phone 分頁、為整列模組都指定數字，就能只改手機、不碰桌機。
為什麼 Divi 無法在介面上單獨改手機版排序
Divi 的視覺編輯器一旦在 Row 內調整模組位置，桌機、平板、手機三種裝置會同時被改動，因為 RWD 架構下三種裝置共用同一份 HTML 與同一份 CSS，介面上沒有任何「只搬手機」的開關。要單獨改手機排序，只能透過 CSS 覆寫排列順序，而不是搬模組。三種裝置共用同一份 HTML 是 RWD 的設計核心，不是 Divi 的 bug；RWD 能運作的根基，就是同一份結構搭配媒體查詢（media query）再依裝置切換樣式，這在 W3C 對響應式網頁設計的說明裡講得很清楚。所以當你打開 Divi 編輯器想搬模組，搬的是結構層，結構一動，三個裝置的版面就一起動，這在邏輯上沒有迴避的空間。
解法是改用 CSS flexbox 的 order 屬性覆寫顯示順序，這條路徑與拖拉模組完全無關。Divi 為此保留了 Custom CSS 欄位，這正是官方為這類「結構不動、視覺重排」需求預留的後門。這裡的關鍵在於分辨三個常被混淆的層次：HTML 結構層、CSS 視覺層、瀏覽器渲染層。介面拖拉動的是結構層，也就是 DOM 節點的先後位置；order 動的是視覺層，告訴瀏覽器在彈性容器裡用什麼先後繪製這些節點，DOM 節點本身的位置完全不動。這條界線很關鍵，因為搜尋引擎爬蟲與螢幕閱讀器讀的是 DOM 結構層，它們看到的是 HTML 原本的順序，所以用 order 重排手機視覺，對搜尋引擎理解頁面內容的先後、對無障礙工具朗讀的順序都不會造成改變。
換句話說，order 是一種「只給視覺、不給語意」的覆寫手段，這也解釋了它在多數情境下為什麼安全：你在桌機看到的 HTML 順序、搜尋引擎檢索到的順序、螢幕閱讀器朗讀的順序三者一致，差別只在手機螢幕上由上到下繪製的先後被重新指定過。需要留意的是，若視覺順序與 DOM 順序差異過大，例如操作流程按鈕在 DOM 裡很後面、卻用 order 排到最前面，鍵盤 Tab 的移動順序會與視覺順序脫鉤，這對鍵盤使用者會造成困惑。實務上的拿捏原則是：order 適合調整「呈現優先度」（哪段先被看到），較不適合扭轉「操作動線」（哪個可點元素先被鍵盤聚焦）。介面拖拉鎖定在結構層、一動全動；order 鎖定在視覺層，又因為 Divi 把手機、平板、桌機的 Custom CSS 拆成三個分頁，所以視覺層可以被裝置切割。兩個層次對應到不同的可控制範圍，這也是為什麼 CSS 路徑成為唯一能乾淨解決問題的入口。先理解這條界線，後面的步驟才會合理，否則多半卡在「為什麼桌機也跟著改」。
四種手機排序方案的比較：為什麼 CSS order 通常勝出
遇到手機排序需求時，能想到的做法通常有四種：用 CSS flexbox order 覆寫、把同一份內容複製成桌機與手機兩個 Row 再用顯示隱藏設定切換、安裝第三方外掛提供 per-device 拖拉、把原本的多欄 Row 拆成單欄重新排列。各自有適用情境與代價，硬記「一定要用哪一種」反而會在某些版型上吃虧，底下用評分卡攤開來比。
| 方案 | 是否影響桌機 | 維護成本 | 需外掛 | 適合情境 |
|---|---|---|---|---|
| CSS flexbox order | 否（貼 Phone 分頁） | 低 | 否 | 同一份內容、只重排手機順序 |
| 複製 Row 顯示隱藏 | 否 | 高（內容改兩次） | 否 | 手機桌機內容差異大、版面結構完全不同 |
| 第三方 per-device 外掛 | 否 | 中（依賴外掛更新） | 是 | 不想碰 CSS、且願意承擔相容性風險 |
| 拆成單欄重排 | 是（結構變動） | 中高 | 否 | 本來就打算重做整列結構 |
從評分卡可以看出，只要手機與桌機的內容一致、只是排列先後不同，CSS order 幾乎都是最划算的選擇，它既不複製內容、也不引入外掛相依。複製 Row 搭配顯示隱藏的代價在於內容維護：日後修改文案或圖片，要記得兩份都改，漏掉一份就會出現桌機手機不一致的尷尬，而且兩份內容都會被送進 HTML，徒增頁面體積。第三方外掛的好處是介面直覺，但代價是綁定在該外掛的更新節奏上，Divi 主題大改版時（例如從 Divi 4 過渡到 Divi 5）最常出問題的就是這類深度相依外掛。
拆成單欄重排則是最徹底但也最傷的方案，它直接改動 HTML 結構，桌機與手機會一起被影響，通常只在重新設計整列時才考慮。多數已上線的頁面，桌機版面已經過 SEO 與轉換調校，結構一動等於把前面的調校成果推倒重來，所以除非本來就要重做，否則用 order 做視覺層重排，保留桌機結構不動，才是風險最低的路徑。把這張評分卡記下來，碰到下一個版型時就能快速判斷該走哪一條。
不適合硬上 CSS order 的版面
order 雖然輕量，仍有幾種版面不適合硬上。當手機與桌機要呈現的內容本身就不同，例如手機要隱藏某段冗長表格、桌機才顯示，硬用 order 把它排到看不見的位置反而不如直接用顯示隱藏關掉該模組，頁面更乾淨，模組也不必再占渲染資源。同一列模組數量極多（例如十幾個）時，逐一指定 order 容易出錯，這時把內容依閱讀邏輯重新分拆成兩三個 Row，維護成本反而更低。而當該列模組之間有資料相依（例如表單的欄位順序），用 order 重排可能讓填寫動線與視覺順序脫鉤，這類操作流程型的版面應該回到結構層調整，不宜用視覺層覆寫處理。判斷的依據是模組之間是否有「先後相依」關係：純呈現的內容用 order，有操作動線的就用結構層。
Divi 在響應式上的這層限制，其實是絕大多數視覺化編輯器的共同限制。結構與樣式分離的代價，就是你沒辦法用「拖拉」這個動作去處理「只給某個裝置看」的排列。理解這一點之後，就會知道接下來要動的是 CSS 欄位，模組本身的位置一個都不必搬。對整套 RWD 觀念還不熟的人，建議先把 響應式網頁設計 RWD 觀念 與 RWD 響應式與 AWD 自適應差異 走一遍，觀念通了，後面每個欄位的位置都會變得直覺。
改排序前要先搞懂 CSS order 與 flexbox
order 是 CSS flexbox 的屬性，數字越小越早出現。根據 MDN 的說明，order 預設值是 0，它只改 flex 容器內子項目的視覺排列順序，不會動到 DOM 結構 [來源：MDN〈order〉〈https://developer.mozilla.org/en-US/docs/Web/CSS/order〉〈2026〉]。在 Divi 的 Row 裡（前端預設就是 flex 容器），幫每個模組的 Main Element 指定 order 數字，就能決定它由上到下的先後，order:1 最先、order:2 第二，依此類推。
這裡有個關鍵容易踩坑：flex 容器裡如果只改其中一個子項目的 order，其他沒設定的會維持預設值 0，結果可能是那個被你改的模組反而排到最後面。所以同一個 Row 內，只要你想參與排序的模組，就通通要給 order 數字，不能只給一個就收工。這條規則在 MDN 對 order 的描述裡寫得明白，沒設定的項目以預設值參與排序 [來源：MDN〈order〉〈https://developer.mozilla.org/en-US/docs/Web/CSS/order〉〈2026〉]。
| order 數字 | 排列位置 | 說明 |
|---|---|---|
| order:1 | 最前面 | 數字最小，最先出現 |
| order:2 | 第二 | 依序往下，可任意跳號 |
| order:3 | 第三 | 只看相對大小，不必連號 |
| 未設定（預設） | 等同 0 | 通常會排在所有指定數字之前 |
order 數字可以任意跳號，例如給 1、3、5 也行，瀏覽器只看相對大小排序。實務上建議用 1、2、3、4 連號，理由單純：之後要在中間插一個模組，連號比跳號好算。手機、平板、甚至後來才新增的裝置斷點，都能套用這同一組規則，不用每碰到一種裝置就重學一套。Divi 的 Row 在前端預設就是 flex 容器，所以 order 屬性會直接生效，不需再宣告 display:flex，這點是 Divi 跟某些其他編輯器不同的地方，省掉一道前置動作。對 flexbox 完全陌生的人，CSS Box Model 與版面控制 是打底的好入口，理解容器與子項目的關係之後，order 的行為會立刻變得清楚。
STEP 1：在 Row 的 Custom CSS 啟用排列控制
要改的 CSS 欄位是 Row 的 Advanced > Custom CSS > Main Element。打開該 Row 的設定（點齒輪），進 Advanced 標籤，找到 Custom CSS，裡面會有好幾個黑色欄位，對應整個 Row 容器的那個就是 Main Element，這條路徑在 Elegant Themes 官方文件裡有標示。記得是在 Row 層級操作，不是單獨選模組，單獨編輯某一個模組無法改變整列的排列。
Divi 的 Custom CSS 欄位分為 Desktop、Tablet、Phone 三個裝置分頁，這套三分頁機制是 Divi 為響應式設計保留的官方結構，Elegant Themes 官方文件對此有完整說明。Step 1 在 Row 層級做的事，是確認整列處於可被 order 控制的環境，若你的 Row 是多欄結構，手機版預設會堆疊成單欄，這時 order 才有由上到下重排的空間發揮效果。
實作上有個細節：如果你的 Row 已經堆疊正常、模組也照預期上下排列，Step 1 其實可以保持 Main Element 空白，直接跳到 Step 2 給每個模組 order。真正決定排列的是模組層的 order 數字，Row 層多半只是確認容器是 flex。Row 結構正常就不必多寫一行 CSS，能少寫就少寫，免得日後除錯時多一個嫌疑對象。但若你接手的是別人改過的 Row，container 的 display 被動過，那 Step 1 就得在 Main Element 補一句 display:flex; 或 flex-direction:column; 把它拉回 flex 容器，order 才會生效，這也是為什麼 Step 1 不能整段跳過，它是在確認地基還在。對 Divi 新架構有疑問的人，可以對照 Divi 5 全新介面與架構改寫 確認欄位位置是否一致。
STEP 2：逐一在模組的 Main Element 指定 order
order 語法要貼在每個模組的 Advanced > Custom CSS > Main Element，而且必須切到 Phone 分頁。要讓誰最先出現就給最小數字，且只在手機版型分頁貼、Desktop 的 Main Element 保持空白，桌機版面就不會被影響。這裡的分頁切換，是整個技巧能不能只影響手機版的唯一分界，也是 Elegant Themes 官方文件明確標示的裝置欄位。
具體操作：模組一（例如文字模組）在 Phone 分頁貼 order:2;、模組二（例如圖片模組）貼 order:1;，手機版就會變成圖片在上、文字在下。超過兩個模組就依序給 order:1、2、3、4，數字對應你希望出現的先後順序。每貼完一個模組，左下角的裝置切換鈕可直接預覽手機版結果，不用另開視窗。
| 模組 | Phone 分頁 Main Element | 手機版顯示順序 |
|---|---|---|
| 圖片模組 | order:1; | 第一位（最上方） |
| 文字模組 | order:2; | 第二位 |
| CTA 按鈕 | order:3; | 第三位 |
| Desktop 分頁 | 保持空白 | 桌機版面不動 |
這裡藏著最容易翻車的地方：只改了兩個模組其中一個。例如你只給圖片 order:1，文字沒設，結果文字維持預設 0，0 比 1 小，文字反而還在圖片前面，看起來像語法沒生效。規則很簡單，參與排序的全部都要給數字，沒有例外；同一個 Row 內所有模組都建議設值，就算暫時不想動的也給它一個 order，這樣日後要調整時不會漏掉。
如果你排的是圖文模組，最經典的應用就是手機版讓圖片顯示在文字上方。桌機版可以是左圖右文的並排，手機版堆疊時預設會照 HTML 順序，這時用 order 把圖片拉到前面，閱讀體驗立刻提升，圖片能不能在第一屏被看到也直接影響跳出率。這套手法的思路跟調整頁首元素層次是同一件事，差別只在這裡動的是排列順序而非樣式。
進階排列模式：搭配顯示隱藏、跨列編排與全寬列的處理
基本的 order 重排只動一個 Row 內的模組順序，但真實版型往往更複雜。把 order 跟 Divi 原生的顯示隱藏設定搭在一起，能做出更細緻的 per-device 控制，且不必引入任何外掛。做法是把 Row 內需要「只給某個裝置看」的模組，先用顯示隱藏在其他裝置關掉，再對剩下的模組指定 order，這樣每個裝置看到的模組集合與排列順序都可以獨立定義。顯示隱藏控制的是模組要不要出現，order 控制的是出現後的先後，兩者分工之後幾乎能涵蓋常見的手機版面需求。
跨列編排是另一個容易被忽略的進階情境。order 只在同一個彈性容器內生效，意思是它重排的是單一 Row 內的模組，跨 Row 的順序它管不到。如果手機版的需求是把 A 列的某個模組排到 B 列模組的前面，光靠 order 做不到，這時只能回到結構層，把模組搬到同一個 Row，或乾脆複製一份內容分別放置。判斷的依據很簡單：要重排的模組是否在同一個 Row 內，是就用 order，否則就得動結構。先釐清這條邊界，才不會對著跨列需求苦試 order 卻毫無反應。
全寬列（Fullwidth Row）與標準列的處理也值得分辨。全寬列在桌機通常是單欄滿版呈現，模組本身已經是上下排列，這時 order 重排的意義較小，因為順序本來就是由上到下；標準列在桌機是多欄並排，手機才堆疊成單欄，這時 order 的價值最大，因為堆疊後的先後可以被重新指定。實作前先確認該列屬於哪一種，能避免在全寬列上白做一輪 order 設定。
| 列類型 | 桌機排列 | 手機堆疊 | order 是否有用 |
|---|---|---|---|
| 標準多欄列 | 多欄並排 | 單欄由上到下 | 是（重排空間最大） |
| 全寬列 | 單欄滿版 | 單欄由上到下 | 有限（順序已定） |
| 特殊欄結構 | 混合多欄 | 視結構而定 | 需逐欄測試 |
一個常見的誤解是把 order 跟 z-index 混為一談。order 改的是彈性容器內子項目由上到下的排列先後，z-index 改的是元素在立體空間的堆疊前後（誰蓋住誰），兩者作用維度完全不同。手機版要把某個模組排到前面，用 order；要讓某個懸浮元素蓋住底層內容，才用 z-index。把這兩者分清楚，除錯時才不會調錯屬性。
平板版也想單獨排序？同一套邏輯換分頁
可以。做法跟手機版完全相同，差別只在貼 order 語法時把 Custom CSS 的分頁切到 Tablet（手機版用的是 Phone），平板就會有獨立的排列順序，三種裝置互不干擾。Divi 的 Custom CSS 三個分頁各自獨立，Desktop、Tablet、Phone 可分別定義不同 order，這套機制記載於 Elegant Themes 官方文件。
實務上常見的需求是三種順序全不同：桌機左圖右文、平板圖在上、手機文在上。這三種排列都能用同一份 order 邏輯達成，只要分別在對應的分頁貼數字。切換分頁時務必確認目前編輯的是哪個裝置，避免貼錯分頁導致桌機被改動，這是平板排序最常出錯的環節。
| 裝置分頁 | 圖片 order | 文字 order | 呈現結果 |
|---|---|---|---|
| Desktop | 空白 | 空白 | 左圖右文（原生並排） |
| Tablet | 1 | 2 | 圖在上、文在下 |
| Phone | 2 | 1 | 文在上、圖在下 |
上表是同一個 Row 在三個分頁的設定對照，三種裝置各自獨立、互不覆寫。Tablet 分頁的語法通常會繼承到較窄的平板裝置，設定一次就能涵蓋多數平板尺寸，不必每個斷點都重寫。若只想要手機特殊、平板跟桌機一致，那 Tablet 分頁留空即可，不必每個裝置都寫，留空等於不覆寫、沿用桌機設定。
會想動平板排序的人，多半是在做資訊密度高的版型，例如作品集模組或價目表模組，平板的閱讀動線跟手機、桌機都不一樣，排序差一個就會讓重點被擠到第二屏。處理這類版型時，把三個分頁當成三個獨立版面來想，會比「同一個版面調三次」清楚很多，per-device 排序在實戰裡的價值也會更具體。
驗證與預覽：用 Divi 編輯器與 Chrome 開發者工具雙重確認
貼完 order 後，Divi 編輯器左下角提供桌機、平板、手機三種裝置的即時切換鈕，點一下就能預覽；要更精確比對真實裝置，再用 Chrome 開發者工具切換裝置模式，甚至能選擇特定手機型號來檢視。Chrome DevTools 的快捷鍵，Mac 是 Command+Option+I，Windows 與 Linux 是 F12 或 Control+Shift+I [來源：Chrome for Developers〈Simulate mobile devices with Device Mode〉〈https://developer.chrome.com/docs/devtools/device-mode/〉〈2026〉]。
Divi 編輯器內建的裝置切換是最快的預覽方式，但它呈現的是近似值，不一定等於真實手機的算結果。要更貼近實機，Chrome 開發者工具左上角那個雙視窗圖示點下去會進入裝置模式，能選具體型號如 iPhone、Pixel 系列，連裝置框與觸控模擬都有。預覽時重點看兩件事：手機版的順序是否如預期、桌機版面是否完全不動，這兩個都過才算完成。
Divi 編輯器內建的裝置切換是最快的預覽方式，但它呈現的是近似值，不一定等於真實手機的算結果。要更貼近實機，Chrome 開發者工具左上角那個雙視窗圖示點下去會進入裝置模式，能選具體型號如 iPhone、Pixel 系列，連裝置框與觸控模擬都有。預覽時重點看兩件事：手機版的順序是否如預期、桌機版面是否完全不動，這兩個都過才算完成。行動裝置（不含平板）在 2026 年第一季已占全球網站流量的 52.27%，手機早已是多數訪客進站的第一個裝置 [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]，所以把重點內容排到第一屏不是錦上添花，而是基本功。
驗證這一步很容易被省略，但它其實是品質把關。行動版的 Core Web Vitals 與閱讀體驗直接影響搜尋排名，排序錯了等於把重點內容推到第二屏，等於自己把轉換率往下壓。Google 早在 2023 年 10 月就宣布行動優先索引（Mobile-First Indexing）已全面完成，所有能在手機上運作的網站現在都以行動爬蟲優先檢索 [來源：Google Search Central Blog〈Mobile-first is here〉 https://developers.google.com/search/blog/2023/10/mobile-first-is-here 2023-10-31]，這代表 Google 看到的版面順序，就是手機版你排出的順序。行動版體驗對排名的影響，可以對照 Core Web Vitals 行動版體驗指標 一起看，排序與速度是兩條獨立但同樣關鍵的線。預覽不要只看一次：在編輯器看一輪、再用 DevTools 開兩三種手機型號各看一輪，因為某些邊界寬度下的堆疊行為會跟預期不同，尤其在平板與手機交界的那個區間。
改了沒生效的常見原因與排查
改了沒生效時，最常見的幾個原因不脫分頁貼錯、模組沒補齊、快取沒清：把 order 貼到 Desktop 分頁而非 Phone 分頁、只改了單一模組而沒幫整列參與排序的模組都設 order、或快取外掛與 CDN 還在送舊版 CSS。逐一確認分頁、補齊其他模組的 order、清除快取後通常就會生效，細節見下表的症狀對照。
| 症狀 | 最可能原因 | 排查動作 |
|---|---|---|
| 桌機版面也跟著變 | order 貼到 Desktop 分頁 | 確認貼在 Phone/Tablet 分頁，Desktop 留空 |
| 手機順序只動一半 | 沒幫整列模組都設 order | 同一 Row 所有模組都給數字 |
| 完全沒變化 | 快取或 CDN 暫存舊 CSS | 清快取、開無痕視窗驗證 |
| order 像沒作用 | Row 容器非 flex | Row Main Element 補 display:flex |
| Divi 5 不渲染 | 主題版本未支援即時 CSS | 更新主題至支援版本 |
快取這關特別值得拿出來講。WP Rocket 這類外掛會把合併壓縮後的 CSS 暫存起來，你改了 order，前端吃的還是舊的快取檔。所以改完沒生效，第一個動作不是懷疑 CSS 寫錯，而是清快取；清完還不行，再開無痕視窗（確保瀏覽器本身也沒暫存）重看一次。快取外掛與 CSS 即時性的關係，是除錯時最容易低估的變數，相關排查細節可參考 網站載入慢的瓶頸排查。
一個實用的除錯技巧：把 order 數字故意寫成 999 與 -999 這種極端值，如果畫面有劇烈變動，代表 CSS 有吃到，問題在數字配置；如果完全沒動，問題在分頁或快取。這招比一行行檢查設定快得多，能快速把問題範圍收斂。
CSS 權重與覆寫衝突：order 被別的規則壓過時怎麼辦
order 貼進 Main Element 之後偶爾會遇到「語法明明寫了卻沒效果」的狀況，這時除了查快取，還要檢查 CSS 權重（specificity）。Divi 主題本身會載入大量預設樣式，子主題、外掛或頁面層級的 Custom CSS 也可能對同一個元素指定 order，當多條規則同時存在，瀏覽器會依權重高低決定誰生效，權重相同時則看載入順序，後載入者覆寫前者。Custom CSS 的 Main Element 欄位寫入的規則權重並非最高，若被更高權重的規則覆寫，order 就會看起來像失效。
確認方法是用 Chrome 開發者工具選取該模組的元素，在右側 Styles 面板檢查 order 屬性是否被劃上刪除線，被刪除線劃掉的規則就是被覆寫的那條，旁邊通常會顯示是哪個檔案、哪個選擇器贏過它。找到衝突來源後，有兩種處理方式：把衝突的規則權重調降，或在 Custom CSS 的 order 後面加上 !important 強制優先。後者見效快但會留下技術債，因為 !important 一旦加上，日後任何要再覆寫它的規則都得同樣加 !important，層層疊加後整份 CSS 會變得難以維護。原則上能靠調整選擇器權重解決，就別用 !important，只有確認沒有更乾淨的寫法時才動用。
Divi 5 改用 React 架構重建編輯器後，Custom CSS 的即時渲染行為與舊版有些差異。舊版 Divi 編輯器是直接操作 DOM，CSS 改動幾乎即時反映；新版架構透過 React 狀態驅動畫面更新，少數情境下需要存檔並重新整理預覽才看得到變化，這屬於渲染機制的差異，並非 CSS 沒生效。若你在 Divi 5 上貼了 order 卻遲遲看不到效果，先存檔、離開再重新進入頁面預覽，多半就能解決。對新架構的細節有疑問，可回頭對照 Divi 5 全新介面與架構改寫 確認欄位位置與行為是否一致。
手機版排序上線前的 QA 檢查清單
order 改完並儲存後，別急著收工，跑一遍這份檢查清單能避免多數的回頭修正。清單按「由低成本到高成本」的順序排列，前面幾項一分鐘內就能驗證，後面幾項需要開發者工具或實機，但每一項都對應一個常見失誤。
- 桌機版面完全不動：切到 Desktop 分頁確認 Main Element 留空，桌機預覽排列與改動前一致。
- 手機順序如預期：Divi 編輯器左下角切手機預覽，由上到下確認每個模組的先後符合 order 設定。
- 同列所有模組都有 order：逐一打開每個模組的 Phone 分頁，確認參與排序的模組都設了數字，沒有漏。
- 平板分頁狀態：確認 Tablet 分頁是有意留空還是漏設，留空會沿用桌機，這常是預期外的來源。
- 清快取並開無痕視窗：清除 WP Rocket、Smush 等外掛快取，再用無痕視窗開站確認吃到的是最新 CSS。
- DevTools 模擬兩種手機型號：用 Chrome 裝置模式選 iPhone 與 Pixel 各看一輪，確認邊界寬度的堆疊行為一致。
- 鍵盤 Tab 動線檢查：若有可點元素，確認鍵盤聚焦順序與視覺順序不至於讓使用者困惑。
- 實機抽驗：用手機實際開一次頁面，模擬真實訪客的體驗，捕捉模擬器看不出來的細節。
同一套 order 語法還能解決哪些手機版需求
同一套 order 語法不只解決圖文顛倒。舉凡手機版要把 CTA 按鈕往前、把聯絡表單往後、把側邊欄內容重新排到主內容下方，都能在不裝任何外掛、不動桌機版面的前提下完成。它是 Divi 響應式設計最實用的 CSS 技巧之一，因為成本極低、效果可預期。其中 CTA 往前對轉換的影響尤其直接：手機版的摺頁以上空間有限，把按鈕用 order 推到第一屏，點擊率往往比放在頁尾高出一截，這類轉換導向的版面思考跟一頁式網頁的動線設計是同一套邏輯，先決定讀者先看到什麼，再用 order 把它排到前面。
以一個月流量約數萬、行動占比約六到七成的內容或服務型網站為例，這類站在手機版最常見的狀況是：桌機版面把主圖、標題、CTA、聯絡表單依序排在同一個多欄 Row 裡，堆疊到手機後 CTA 往往被擠到第二甚至第三屏，訪客還沒滾到就離開了。依這類站的典型表現幅度，第一屏可見的 CTA 與被推到第二屏的相比，點擊率差距大約落在約三到五倍之間，這也是為什麼把 CTA 用 order 推到手機第一屏、把次要說明往後挪，通常是最先該做的一步。但要誠實說明一條限制：order 只能重排既有模組的先後，如果 CTA 本身的文案、設計或報價沒有吸引力，把它排到第一屏也救不了轉換，排序是放大器不是萬靈丹。實務上的判斷順序是：先確認手機流量占比夠高（約五成以上）值得動這層工，再用 order 把主力 CTA 推到第一屏，最後回頭檢視 CTA 本身的內容是否到位，這三步缺一不可。
order 動的是排列順序，模組位置一個都沒搬。這條界線守住，per-device 的版面需求大都能用同一套方法拆開來處理。想再擴充 Divi 的版面能力，必裝的 Divi 外掛推薦清單 與 Divi Cloud 雲端版型管理 補的是「功能」這層，跟 order 補的「排列」這層是互補關係；排好手機動線之後，內容面的模組（如電子報訂閱、社群分享按鈕、自訂字型）再疊上去，整套響應式版面才算到位。
常見問題
改 Divi 手機版排序會影響電腦版嗎？
只要 order 只貼在 Phone 分頁、Desktop 留空，就不會影響電腦版。若不小心貼到 Desktop 分頁，三種裝置會一起被改。
改完 CSS 沒生效怎麼辦？
依序檢查三件事：order 是否貼在正確分頁、同一 Row 內所有模組是否都設了 order、快取外掛與 CDN 是否清掉。多半出在這三處。若 CSS 確定有吃到卻仍無效果，再檢查是否被更高權重的規則覆寫。
order 會影響 SEO 與搜尋引擎看到的內容順序嗎？
不會。order 改的是 CSS 視覺層的繪製先後，DOM 結構層的節點順序完全不動，而搜尋引擎爬蟲讀的是 DOM 結構層。Google 的行動優先索引（Mobile-First Indexing）已於 2023 年 10 月全面完成，所有能在手機上運作的網站都以行動爬蟲優先檢索 [來源：Google Search Central Blog〈Mobile-first is here〉 https://developers.google.com/search/blog/2023/10/mobile-first-is-here 2023-10-31]，但爬蟲讀到的依然是 DOM 原始順序，視覺層的 order 重排對它沒有影響。需要留意的反而是鍵盤 Tab 聚焦動線，當視覺順序與 DOM 順序差距過大時，鍵盤使用者可能感到困惑，操作流程型的版面應優先用結構層調整。
Divi 的 order 跟顯示隱藏設定有什麼差別？
兩者分工不同。顯示隱藏控制的是某個模組在某個裝置要不要出現，關掉後該模組不會被送進該裝置的版面；order 控制的是模組出現後的排列先後。把手機版某個冗長表格用顯示隱藏關掉，比硬用 order 把它排到看不見的位置更乾淨，因為前者直接省去該模組的渲染，後者只是視覺上挪走、模組仍占資源。實務上兩者常搭配使用：先用顯示隱藏決定哪些模組現身，再用 order 決定現身後的先後。
order 可以跨 Row 重排模組嗎？
做不到。order 只在同一個彈性容器（也就是同一個 Row）內生效，跨 Row 的模組順序它管不到。若手機版需要把 A 列的模組排到 B 列模組前面，只能回到結構層，把模組搬到同一個 Row，或複製內容分別放置。判斷依據很單純：要重排的模組若在同一個 Row 內就用 order，跨列就得動結構。
order 之外的 Divi 版面工具箱
把 order 用熟之後，下一步是把整個 Divi 的版面能力一起補齊。order 只是整個響應式版面工程的一個小切面，它跟 網頁設計與響應式完整指南、網頁排版設計範例 是同一條設計脈絡上的工具，差別只在 order 處理的是 per-device 的排列順序。整個網站的導覽與分類排序、編輯器選擇，也是響應式版面工程的一部分：WordPress 分類排序教學 處理分類、WordPress 選單與導覽排序 處理導覽，這幾條線一起顧，手機版才會真的順。若你還在評估編輯器，WordPress 頁面編輯器比較 能給你橫向對照的依據；排列這層用 order 處理掉之後，再回頭把主題與編輯面的基本功補齊，手機版才不會出現顧此失彼的狀況。