用 CSS 調換 DVI 順序：order

在很多時候我們會需要改變元素的順序，如果是自己寫的網站，當然很簡單。但是如果是在像 WordPress 裡面，較方便的做法是用 CSS 去改。我們會用到 order 指令。

HTML

				
					<div class="box">
<div>1</div>
&nbsp;
<div>2</div>
&nbsp;
<div>3</div>
</div>

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;}

Daco Note

用 CSS 調換 DVI 順序：order

HTML

CSS