<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="jquery-3.2.1.js"></script>
<script src="dist/js/bootstrap.js"></script>
<title>栅格布局的列排序</title>
<style>
.grid {
border: 1px solid #696969;
border-radius: 5px;
background-color: lightskyblue;
min-height: 30px;
text-align: center;
line-height: 30px;
}
.green {
background-color: lightgreen;
}
.pink {
background-color: lightpink;
}
</style>
</head>
<body>
<div>
<h4>原来的顺序</h4>
<div>
<div class="col-md-9 grid green">.col-md-9</div>
<div class="col-md-3 grid pink">.col-md-3</div>
</div>
<h4>排序后的顺序</h4>
<div>
<div class="col-md-9 col-md-push-3 grid green">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9 grid pink">.col-md-3 .col-md-pull-9</div>
</div>
</div>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
