Bootstrap5网络Grid列的重排序示例
7.1.1 列的重排序示例
有时候出于某种原因（例如SEO），我们需要显示的视觉效果和源码中显示的先后顺寻不一样，比如说网页分左右两部分，我们需要左边是导航，右边是最新文章列表，但是出于seo原因，我们想让搜索引擎的蜘蛛首先获取的是最新文章列表，这时候我们就需要列的重排序。当然，你或许还有其他的原因促使你这样做。 我们先来给个形象的例子，出于易懂性，这里仅是给出演示代码，没有美化。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>列的排序</title> </head> <body> <div> <div class="row row-cols-3"> <div class="col-9 order-2"> <h5>最新文章列表</h5> <ol> <li>文章标题 作者 发布日期</li> <li>文章标题 作者 发布日期</li> <li>文章标题 作者 发布日期</li> <li></li> <li></li> </ul> </div> <div class="col-3 order-1"> <h5>站点导航</h5> <ul> <li>随手记</li> <li>心情点滴</li> <li>职场人士</li> </ul> </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js"></script> </body> </html>
**是不是很神奇，接下来我再给出另一个例子，来详细介绍一下排序规则。 **
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<style>
.col {height: 50px; border: 1px solid #000;}
h5{text-align: center;}
</style>
<title>网格行列演示</title>
</head>
<body>
<h5>默认顺序</h5>
<div>
<div class="row row-cols-3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
<h5>使用数字调整顺序</h5>
<div>
<div class="row row-cols-3">
<div>1</div>
<div class="col order-1">2 order-1</div>
<div class="col order-5">3 order-5</div>
<div class="col order--1">4 order--1</div>
<div class="col order-6">5 order-6</div>
<div class="col order-0">6 order-0</div>
<div class="col order-4">7 order-4</div>
<div>8</div>
</div>
</div>
<h5>使用单词调整顺序</h5>
<div>
<div class="row row-cols-3">
<div>1</div>
<div class="col order-last">2 order-last</div>
<div>3</div>
<div class="col order-first">4 order-first</div>
<div class="col order-first">5 order-first</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
<h5>数字和单词调整顺序</h5>
<div>
<div class="row row-cols-3">
<div>1</div>
<div class="col order-last">2 order-last</div>
<div class="col order-5">3 order-5</div>
<div class="col order-3">4 order-3</div>
<div class="col order-first">5 order-first</div>
<div class="col order-2">6 order-2</div>
<div class="col order-1">7 order-1</div>
<div>8</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>
具体效果