​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Bootstrap 列排序 - 迹忆客(jiyik.com)</title>
6
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
7
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
8
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.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>

Design By 迹忆客 © 2023 jiyik.com ALL RIGHT RESERVED 冀ICP备15007416号-2