jquery - Bootstrap 3 列 LTR 和 RTL 的顺序相同

Question

我有 3 列，我希望从左到右 LTR 和从右到左 RTL 的顺序相同。

我用这个https://github.com/morteza/bootstrap-rtl用于 bootstarp 的 RTL 支持。

这是 LTR 代码:

www.bootply.com/14fHNNoMnQ

这是 RTL 代码:

www.bootply.com/WmAp0cjzET

我需要在 xs 和 sm 设备上堆叠的三列:

A
B
C

在 md 和 lg 设备上，LTR 和 RTL 的顺序如下:

B | A | C

我也不介意使用表格。

Answer 1

检查一下它正是您要找的东西: https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

Bootstrap 提供了一种很好的方法来处理这种情况，即推送和拉取列类。推送类会将列向右移动，而拉类会将列向左移动。

<div class="row">
    <div class="col-lg-4 col-lg-push-4 col-md-4 col-md-push-4 col-sm-12 col-xs-12">
        <div>A</div>
    </div>
    <div class="col-lg-4 col-lg-pull-4 col-md-4 col-md-pull-4 col-sm-12 col-xs-12">
        <div>B</div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div>C</div>
    </div>
</div>

这会给你你想要的:

三列堆叠在 xs 和 sm 设备上:

A
B
C

在 md 和 lg 设备上，LTR 和 RTL 的顺序如下:

B | A | C