引导 3 列 LTR 和 RTL 的顺序相同答案

【问题标题】：Bootstrap 3 columns same order for both LTR and RTL引导 3 列 LTR 和 RTL 的顺序相同
【发布时间】：2015-03-08 14:49:18
【问题描述】：

我有 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

在 LTR 和 RTL 的 md 和 lg 设备上，排序如下：

B | A | C

我也不介意使用表格。

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

请检查此方法。

 <div class="row">
    <div class="col-xs-12 col-md-12 col-lg-4">
      Left column
    </div>
   <div class="col-xs-12 col-md-12 col-lg-4">
    <b>
    Center column<br>
    Center column<br>
    Center column<br>
    </b>
  </div>
  <div class="col-xs-12 col-md-12 col-lg-4">
    Right column
  </div>
</div>

谢谢， Pramodini Priyadarsini

【讨论】：

【解决方案2】：

看看这正是你要找的东西： https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

Bootstrap 提供了一种很好的方式来处理这种情况，即推拉列类。 push 类将列向右移动，而 pull 类将列向左移动。

<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

在 LTR 和 RTL 的 md 和 lg 设备上，排序如下：

B | A | C

【讨论】：