不少人在使用 Divi builder 排版時，想調整手機的排版順序，讓手機的訪客能有更好的視覺體驗，但在更動時，不想更改原有的電腦版面，可以怎麼做呢？
其實是有方法去個別調整 Divi mobile 版面，這篇文章會教大家怎麼去設定，修改 CSS 欄位。
讓我們一起看下去吧～：）
1. 只改變 Divi mobile 版面前後順序？
「 RWD 響應式設計 」是在設計網頁時，很重要的一大環節，因為會攸關於訪客的使用體驗，不同的設備（電腦、平板及手機）呈現出來的觀看畫面完全不一樣。
因此，網頁設計需要配合螢幕尺寸，進行進階調整，讓訪客在各種設備上都能方便閱覽。
至於說要如何做到 響應式網頁（RWD） ， 關鍵在於「同一個 CSS 檔案」，桌機、平板及手機都是用同一個 HTML 代碼跟同一個 CSS 檔案，所以才可以符合各種螢幕寬度條件。
這也代表著，網頁排版會根據不同的設備而改變！
如果「只想改變 Divi mobile 版面」可以怎麼做？
舉例來說，電腦版的文字在左邊、圖像在右邊，然後手機版的圖像是在上面、文字在下面。
我想要讓手機使用者在閱讀文章時，優先看到圖片，接著是文章內容，但電腦的圖文版面是不要更動，若要圖像跟文字位置互換，就要更改模塊位置。
不過一旦更動是三種設備的版面一起更改，而 Divi 的功能是「無法個別更改設備模塊順序」，這時候我們只需要「更改 CSS 編碼」就可以了！
2. Divi mobile 版面的更動步驟
我們要更動的位置是「手機的 CSS 編碼」，只需要增加代碼就可以更改手機版面的前後順序。
STEP 1. 開啟 Row（行）設定，編輯 CSS。
首先，我們打開 Row（行）設定，進行內部所有模塊的編輯，如果只單獨選擇模塊編輯，無法做出版面順序更換，必須編輯 Row 以內的模塊。
進入 Row 的設定介面，我們點選 Advanced ，裡面有一個 Custom CSS，開啟 CSS 的欄位後，會有好幾個黑色小視窗，複製下面這組代碼，貼在 Main Element 的欄位裡（電腦版型）。
display: flex;
flex-wrap: wrap;STEP 2. 設定模塊的順序編號
我們設定好 Row 的 CSS 介面後，要來設定 Row 以內的模塊，先從模塊一（文字模塊）開始編輯！
進入編輯介面後，我們在 Advanced 裡找到 Custom CSS，打開來後選擇 Main Element 的欄位，這時候我們要選擇「手機（mobile）的版型」，將下方這組代碼貼進去欄位裡。
order: 2;
接下來編輯模塊二，步驟跟模塊一完全相同，但唯一差別在「輸入的代碼數字不同」，這邊我們要輸入「order: 1;」的代碼。
order: 1;會各別在這兩個模塊裡編輯代碼編號，主要原因是「單一排序模塊展示的先後順序」，所以先出現的就列「order: 1;」，若是有 3 個以上的版型需要自訂排序，用這方式去編列1、2、3、4等任意數量，以此類推。
編輯完畢後，我們旁邊的手機預覽版面就會更動，原本在文字下方的柴犬，就會變成文字上方，而網頁版本的版面維持位置不變。
3. 更改後的效果比對
這一章節給大家看看，更改後的效果比對！
首先是原本的網頁版型跟手機版型，手機版型是文字在上方、柴犬圖像在下方；更改後變成文字在下方、柴犬圖在上方。
而網頁的版型依舊維持原本樣子，文字內容在左邊、圖像在右邊的排版。
這邊特別說一下，Divi 編輯器左下角可以自由切換桌機、平板及手機三種裝置尺寸的畫面，我們可以用這種方式檢視畫面。
另一種方法也可以檢視，我們在 Chrome 中，開啟「開發者工具」來檢視。
★快捷鍵按法：
Mac：Command + Option + I
Windows／Linux：F12 （Control + Shift + I ）
在開發者工具中，左上角有兩個視窗的圖標，那個就是可以檢視各種裝置的畫面，其中查看手機畫面時，可以選擇手機型號，來預覽網頁畫面，這設定很仔細。
若是檢查完之後，確認無誤就完成了！
以上就是更改 Divi mobile 版面順序的教學，步驟很簡單，只要調整、添加代碼，我們就能單一改變手機（或其他裝置）的介面，提升訪客的觀看感受。
常見問題
平板也適用這個更改方式嗎？
我們前面有提到，桌機、平板及手機都是用同一個 HTML 代碼跟同一個 CSS 檔案，才能做出響應式網頁，內容排版會是「一致性」。
如果只有個別更改版面排序，直接採用上述方法去編輯，唯一差別是在調整模塊順序時，打開 Main Element 的欄位時，我們要選擇「平板的版型」。
什麼是響應式設計？
「響應式設計」是指網頁配合螢幕尺寸而設計更改，只要遇上使用設備（如：手機）自動變換適當的版面尺寸。
會有響應式設計的出現，是因為「手機瀏覽」的習慣已經變成趨勢，如今使用電腦瀏覽的方式不再成為主流，因此許多網頁設計師會針多數人的瀏覽習慣，做出網頁上的調整。
所以才會有「響應式設計」的出現，詳細內容可以參考這 2 篇文章： 什麼是RWD 響應式設計？ 、 響應式網頁和自適應網站差異 。
Divi 的操作介面不熟悉，可以閱讀哪篇文章學習？
如果對 Divi操作介面還不熟練，或是不清楚選項跟功能，建議可以參考這篇「 Divi Themes 中文教學 」，裡面詳細介紹 Divi 的使用介面，一看就能清楚明瞭。
WordPress 學習資源
學習網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 2 項實用資源，可有效幫助大家做學習。
資源一：犬哥數位（專業 WordPress 網頁設計公司）
如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！
我們有多年網頁設計經驗，加上上百個實戰高質感作品，絕對能滿足您的需求！
資源二：WordPress＋SEO 超強線上課程
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗，從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等 .. 豐富內容，一次教會你。
課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！
網站建立完畢後，但卻沒有流量怎麼辦？或是只能靠花錢投廣告才會有訂單？
這門 SEO 排名飆升課，教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..，大幅提升行銷能力。
帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！
