首页 | 简单教程,简单编程

代码编辑器：

<!DOCTYPE html>
<meta charset="utf-8">
<link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/> 
<style> 
#main {
  width: 400px;
  height: 150px;
  border: 1px solid #000000;
  display: flex;
}

#main div {
  width: 70px;
  height: 70px;
}
</style>

<div id="main">
  <div style="background-color:coral;" id="myRedDIV"></div>
  <div style="background-color:lightblue;" id="myBlueDIV"></div>
  <div style="background-color:lightgreen;" id="myGreenDIV"></div>
  <div style="background-color:pink;" id="myPinkDIV"></div>
</div>

<p>点击“尝试一下”按钮，改变四个 DIV 的顺序：</p>

<button onclick="myFunction()">尝试一下</button>

<script>
function myFunction()
{
document.getElementById("myRedDIV").style.order = "4";
document.getElementById("myBlueDIV").style.order = "3";
document.getElementById("myGreenDIV").style.order = "1";
document.getElementById("myPinkDIV").style.order = "2";
}
</script>

<p><b>注意：</b>Internet Explorer 和 Safari 不支持 order 属性。</p>

<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>

运行结果：