根据设备更改列顺序

Question

我想根据用户是使用移动设备还是 PC 来更改顺序。

我要这个手机订单：

一个

B

一个

B

PC 版：

A B

B A

到目前为止我尝试了什么：

<div class="row">
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
</div>
<br><br>
<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content A
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content B
    </div>
</div>

第一行工作正常，但第二行不行，我看不出如何修复它。执行此操作的最佳方法是什么？

Answer 1

我找到了解决方案，但我认为这不是最好的方法：

<div class="row">
    <div class="col-sm-5 order-sm-0 order-lg-1">
        Content A
    </div>
    <div class="col-sm-5 order-sm-1 order-lg-0">
        Content B
    </div>
</div>
<br><br>
<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content A
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content B
    </div>
</div>

Answer 2

我想我在这里找到了您的解决方案。试一试：

<div class="row">
    <div class="col-md-5">
        Content A
    </div>
    <div class="col-md-5">
        Content B
    </div>
</div>
<br><br>
<div class="row">
    <div class="col-md-5 order-md-1">
        Content A
    </div>
    <div class="col-md-5 order-md-0">
        Content B
    </div>
</div>

根据设备更改列顺序

Change column order based on device

html

css

bootstrap-4

col

在codesnipped中你看不到效果。你必须在浏览器中测试它