案例：Bootstrap案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Bootstrap 实例 - 列排序</title>
6
    <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
7
    <script src="/js/bootstrap/jquery.min.js"></script>
8
    <script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
9
</head>
10
<body>
11
​
12
<div class="container">
13
​
14
   <h1>Hello, world!</h1>
15
​
16
   <div class="row">
17
      <p>排序前</p>
18
      <div class="col-md-4" style="background-color: #dedef8;
19
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
20
         我在左边
21
      </div>
22
      <div class="col-md-8" style="background-color: #dedef8;
23
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
24
         我在右边
25
      </div>
26
   </div><br>
27
   <div class="row">
28
      <p>排序后</p>
29
      <div class="col-md-4 col-md-push-8"
30
         style="background-color: #dedef8;
31
         box-shadow: inset 1px -1px 1px #444,
32
         inset -1px 1px 1px #444;">
33
         我在左边
34
      </div>
35
      <div class="col-md-8 col-md-pull-4"
36
         style="background-color: #dedef8;
37
         box-shadow: inset 1px -1px 1px #444,
38
         inset -1px 1px 1px #444;">
39
         我在右边
40
      </div>
41
   </div>
42
​
43
</div>
44
​
45
</body>
46
</html>