如何重新排序bootstrap 3中的列？

Question

我正在使用自适应网站并使用bootstrap 3.我已经附加了主页的布局。对于移动版本，我需要重新排序列。我还附上了移动版的理想布局。请帮我弄清楚如何实现这种移动布局。

Answer 1

您可以使用javascript的其他方法。此外，来自visible的{​​{1}}和hidden classes也可以使用。

<强> HTML：

bootstrap

<强> JS：

<div class="container-fluid" data-toggle="orderColumns" data-target=".column">
  <div class="row">
    <div class="col-xs-12 col-sm-6 column" data-position="0" data-lg-orderid="1" data-xs-orderid="2">
      <h1>
      A
      </h1>

    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="row">
        <div class="col-sm-12 column" data-position="1" data-lg-orderid="0" data-xs-orderid="0">
          <h1>
          B
          </h1>
        </div>
      <div class="col-sm-12 column" data-position="2" data-lg-orderid="2" data-xs-orderid="1">
          <h1>
          C
          </h1>
        </div>
      </div>

    </div>
  </div>

</div>

小提琴：https://jsfiddle.net/coheafof/4/

Answer 2

实现此目的最简单（也许不是最优雅）的方法是使用.hidden-xs和.vi​​sible-lg类。这将使您可以完全控制移动设备和桌面的布局，但这意味着要复制代码。

请参阅http://getbootstrap.com/css/#responsive-utilities