Question

大家好，我有2个cols的页面，每个col我都有盒子。

[6][6]
 a  b
 a  b
 a  b

如何更改订单：

a
b
a
b
a
b

有可能吗？我只想在mobile.Here是我的页面结构：

<div class="row">
  <div class="col-md-6">
    <div>a</div>
    <div>a</div>
  </div>
  <div class="col-md-6">
    <div>b</div>
    <div>b</div>
  </div>
</div>

Answer 1

我认为您当前的HTML结构不可能。但是，如果您可以更改结构，那么您将能够使用网格类来定位xs设备：

<div class="row">
    <div class="col-sm-6">
        <div>a</div>
    </div>
    <div class="col-sm-6">
        <div>b</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <div>a</div>
    </div>
    <div class="col-sm-6">
        <div>b</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <div>a</div>
    </div>
    <div class="col-sm-6">
        <div>b</div>
    </div>
</div>

演示： http://plnkr.co/edit/j2oHBuJUi1FWmiugy0nr?p=info

Answer 2

我认为您应该将内容分成单独的col-md-6，例如

<div class="row">
  <div class="col-md-6">
    <div>a</div>
  </div>
  <div class="col-md-6">
    <div>b</div>
  </div>
  <div class="col-md-6">
    <div>a</div>
  </div>
  <div class="col-md-6">
    <div>b</div>
  </div>
  <div class="col-md-6">
    <div>a</div>
  </div>
  <div class="col-md-6">
    <div>b</div>
  </div>
</div>

你的布局允许这个吗？例如http://codepen.io/anon/pen/doPogJ

在移动设备上更改bootstrap cols

2 个答案: