在很多時候我們會需要改變元素的順序,如果是自己寫的網站,當然很簡單。但是如果是在像 WordPress 裡面,較方便的做法是用 CSS 去改。 我們會用到 order 指令。
HTML
1
2
3
CSS
padding: 50px;
}
.box>div:nth-of-type(1) {
background:#f90;
}
.box>div:nth-of-type(2) {
background: #cc0;
}
.box>div:nth-of-type(3) {
background: #05c;
}
/*加入以下語法將1和2的順序對調*/
.box>div:nth-of-type(1){-webkit-order: 2;}
.box>div:nth-of-type(2){-webkit-order: 1;}
.box>div:nth-of-type(3){-webkit-order: 3;}
.box>div:nth-of-type(1){order: 2;}
.box>div:nth-of-type(2){order: 1;}
.box>div:nth-of-type(3){order: 3;}