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