如何在WordPress內透過CSS Flex的Order方式來更改元素的順序?
此篇是寫給具有一定WordPress能力或 基礎網頁設計 經驗者。
順序更改有很多種方式，以 WordPress 來說，最好的方式當然是直接利用 WordPress的Hook 來做順序更改，避免直接更改核心檔案。
但如果不知道如何更改Hook又希望能快速解決，可以考慮”硬改”的方式。
我們可以透過jQuery的prependTo或appendTo來將你要的元素直接硬插到你要的HTML元素裡面。
但jQuery除了載入速度的問題以外，碰到跑 php迴圈 的時候，可能會出現一些不可預期的問題，因此最簡單的方式就是運用CSS的Flex來解決這件事!
解決方式
以下將以展躍的Demo網站裡面的最新消息做範例，我們需要將日期拉到標題上面。
首先，將你需要改變的元素，在他的最外層加入一個Class Name，避免影響到其他相同的元素。
再來，先打開F12檢查元素，看清楚你需要更動的內容以及你剛剛命名的Class Name在哪邊。
接著發現，class name為 “uael-post__content-wrap” 的這個元素是你要更動的元素的上一層，所以我們需要先讓它變成Flex Box。
加入 display: flex; 及 flex-direction: column; 使它變成 flex 元素，記得它的前面要加入你剛剛命名的 class name 以確保它不會影響其他元素。
接著你就可以開始調整你需要的順序，以下是此次範例調整的順序。
順帶一提，你可以安裝客製化CSS的欄位或是使用 Elementor 本身的CSS編輯將你的Style語法貼到裡面，又或者可以像我們此次範例的方式，將語法置入在functions.php內。
紫色框代表：我需要將此功能插入在HTML的body裡面。
綠色框代表：這次功能的名稱（自訂）。
紅色框代表：你的CSS語法（記得要用<style>包住哦!）。
藍色框代表：
因為functions.php是撰寫php的，你的功能也是用php寫的，因此你要先將前面的php做個”結束”，所以寫 “?>”，而寫完你的HTML與CSS樣式以後，在加入 “<?php” 延續後面的php程式。
也就是說 ?> “這裡面才是你要加入的HTML語法” <?php。
最後只要更新就大功告成囉!
