Question

我想使用bootstrap对移动视图中的列重新排序。
目前在桌面列上就像是。

[a- long block][b][c]
[d][e][f - long block]

HTML就是

<div class="row">
  <div class="col-sm-9 col-xs-12"></div>
  <div class="col-sm-3 col-xs-6"></div>
  <div class="col-sm-3 col-xs-6"></div>
</div>
<div class="row">
  <div class="col-sm-3 col-xs-6"></div>
  <div class="col-sm-3 col-xs-6"></div>
  <div class="col-sm-9 col-xs-12"></div>
</div>

在手机上我想要的订单如下：

[a - long block]
[b]
[c]
[f - long block]
[d]
[e]

我尝试使用col-sm-push-12到f列，但没有成功。有什么建议吗？

Answer 1

如果您在使用Bootstrap时始终记得先考虑移动设备，这会有所帮助。试试这个：

<div class="row">
  <div class="col-xs-12 col-sm-6">a</div>
  <div class="col-xs-12 col-sm-3">b</div>
  <div class="col-xs-12 col-sm-3">c</div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">f</div>
  <div class="col-xs-12 col-sm-3 col-sm-pull-6">d</div>
  <div class="col-xs-12 col-sm-3 col-sm-pull-6">e</div>
</div>

一个有效的例子：http://www.bootply.com/QILyva5K0q

Answer 2

push-*和pull-*不适用于宽度为100％的列，即col-*-12。

您可以对xs设备使用flexbox解决方案。

同时检查12列网格系统。您sm的当前网格总数为15(9+3+3)，无法呈现您对桌面列的期望。

＆＃13;

@media (max-width: 768px) {
  .row.second {
    display: flex;
    flex-direction: column; /* Vertical stacking */
  }
  .row.second > div:last-child {
    order: -1; /* Default is 0, so this is aligned to the top */
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-6 col-xs-12">a</div>
  <div class="col-sm-3 col-xs-12">b</div>
  <div class="col-sm-3 col-xs-12">c</div>
</div>
<div class="row second">
  <div class="col-sm-3 col-xs-12">d</div>
  <div class="col-sm-3 col-xs-12">e</div>
  <div class="col-sm-6 col-xs-12">f</div>
</div>

＆＃13;

列顺序操作引导程序

2 个答案: