CodeLab
Show Output
 
xxxxxxxxxx
31
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1">
6
<title>Order Grid Columns Using Order Number in Bootstrap</title>
7
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
8
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
9
<style>
10
    /* Some custom styles to beautify this example */
11
    .row{     
12
        margin-top: 1rem;
13
        background: #dbdfe5;
14
    }
15
    .col{
16
        padding: 10px 15px;
17
        background: #abb1b8;
18
        border: 1px solid rgba(0,0,0,0.5)
19
    }
20
</style>
21
</head>
22
<body>
23
    <div class="container">
24
        <div class="row">
25
            <div class="col order-4">First, but ordered at last</div>
26
            <div class="col">Second, but ordered at first</div>
27
            <div class="col order-1">Last, but ordered at second</div>
28
        </div>
29
    </div>
30
</body>
31
</html>
 

在微博、微信、公众号、小程序分享此示例。 如果您觉得有帮助,请给我们一个赞。