classes

classes

关注
发信
Android 应用程序 - 添加“共享"按钮在社交网络上分享应用程序
非IDR图片NAL单位-0x21和0x61的含义
动态加载下一个片段，ViewPager
Flutter：如何将Canvas / CustomPainter保存到图像文件？
配置next.config文件
MacOS上不区分大小写的文件系统的MySQL区分大小写表名称
UIImagePickerController显示的VIDEO_TOO_LONG_TITLE警报
自定义预取
WPF TabItem 标题样式
JavaScript附加和前置与jQuery附加和前置
ASP.NET MVC AJAX使用jQuery
求解最佳拟合多项式并绘制下拉线
WebApi:将参数映射到标头值
Pinterest 的官方 OAuth2 流程似乎返回了无效的访问令牌
在database_name中返回database_name =='：memory：'或'mode = memory'TypeError：类型'WindowsPath'的参数不可迭代

通过 Bootstrap4 对列进行排序

扫码查看
本文介绍了通过 Bootstrap4 对列进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有 3 列，我想在桌面和移动设备上以不同的方式订购它们.目前，我的网格看起来像这样:

<div class="col-xs-3 col-md-6">1
<div class="col-xs-3 col-md-6">2

<div class="col-xs-6 col-md-12">3

在移动视图中，我希望有以下输出:

1-3-2

不幸的是，我不知道如何使用 Bootstrap 4 中的 .col-md-push-* 和 .col-md-pull-* 类来解决这个问题.

解决方案

2021 - Bootstrap 5

响应式排序类现在是 order-first、order-last 和 order-0 - order-5

移动设备(较小的屏幕):

还可以使用 flexbox 方向工具 更改列顺序...

<div class="row flex-column-reverse flex-md-row"><div class="col-md-8">2
<div class="col-md-4">手机上的第一名

演示:Bootstrap 4.1 Change Order with Flexbox Direction

旧版本演示
演示 - alpha 6
演示 - 测试版 (3)

查看更多 Bootstrap 4.1+ 订购演示

相关
Bootstrap 4 中的列排序使用 push/拉取和 col-md-12
Bootstrap 4 更改列顺序

A-C-B A-B-C

I have 3 columns which I want to order in different ways on desktop and mobile.Currently, my gird looks like this:

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

In the mobile view I want to have the following output:

1-3-2

Unfortunately I don't get how to solve this with the .col-md-push-* and .col-md-pull-* classes in Bootstrap 4.

解决方案

2021 - Bootstrap 5

The responsive ordering classes are now order-first, order-last and order-0 - order-5

Demo

2018 - Bootstrap 4

The responsive ordering classes are now order-first, order-last and order-0 - order-12

(This only works pre 4.0 beta)

Bootstrap 4.1+

Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12, responsively such as order-md-12 order-2 (last on md, 2nd on xs) relative to the parent .row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

Demo: Change order using order-* classes

Desktop (larger screens):

Mobile (smaller screens):

It's also possible to change column order using the flexbox direction utils...

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

Demo: Bootstrap 4.1 Change Order with Flexbox Direction

Older version demos
demo - alpha 6
demo - beta (3)

See more Bootstrap 4.1+ ordering demos

Related
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns

A-C-B A-B-C

这篇关于通过 Bootstrap4 对列进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-23 06:32
查看更多
Powered by LMLPHP ©2025 classes 0.040616