首页 > 文章资讯 > 站长教程 > 建站知识 > Bootstrap order-1使用方法和实战应用技巧

Bootstrap order-1使用方法和实战应用技巧

时间：2023年11月30日

来源：网络

编辑：佚名

在Bootstrap中 order-1是用来做排序的作用，也就是说通过order-数值的组合可以将模块根据数值的大小进行按数值前后顺序排序。
order-1使用方法
单独使用 order-1(排序在最前面) order-lg-1(排序在lg的自适应宽度下最前面)
自适应结合使用 order-xl-1 order-sm-2， order-xl-1 order-md-2 order-5 (排序在xl最前面，sm排在第2位)
order-1综合使用案例
1.首先上代码
<div class="row align-items-center mb-2">
<div class="col-lg-7 order-lg-1 order-2">
<div class="fabric-intro text-lg-end">
<h3>Vitale Barberis（维达来）</h3>
<p>Vitale Barberis Canonico（简称"VBC"），中文名"维达莱"，在意大利，VBC被很多人称为是性价比至高的面料之一，这也是为什么很多年来，VBC一直雄踞意大利西服面料销售前列的原因。据美国媒体报道，小布什就职典礼穿的就是维达莱130支面料的西服。</p>
</div>
</div>
<div class="col-lg-4 order-lg-2 order-1">
<div class="fabric-img">
<img src="theme/image/vitale_barberis.jpg" alt="">
</div>
</div>
</div>
2.看实际效果
3.说明，我们看大在大浏览器里先文字后图片，而在设置了order- 后在移动端的顺序变成了先图片后文字。
order-1总结
使用了Bootstrap order- 后就可以控制在不痛浏览器尺寸下模块出现的顺序。

新闻资讯更多

猜你需要