详情页

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- 后就可以控制在不痛浏览器尺寸下模块出现的顺序。
相关文章
猜你需要