Question

我希望使用Bootstrap在移动设备上重新排列多个堆叠列。在重新排列彼此相邻的两列时，我知道推/拉方法，但在重新排列三列时，我遇到了困难。

在下面的示例中，我希望蓝色列显示在断点的顶部。在较小的屏幕上，订单应为蓝绿红色，并保持其在桌面设备上的方式。

<div class="row">
  <div id="green" class="col-sm-12">
    Green
  </div>

  <div id="blue" class="col-sm-4">
    Blue
  </div>

  <div id="red" class="col-sm-8">
    Red
  </div>
</div>

https://jsfiddle.net/wqg0w4kn/

我尝试过多次推拉，但似乎无法正确使用。

Answer 1

不幸的是，所有前缀都是必要的（暂时）：

＆＃13;

#blue {background-color: #3F77B3;}
#green {background-color: #95E289;}
#red {background-color: #FF7878;}
.row.reordered {color: rgba(255,255,255,.21);}
.row.reordered > * {padding: 3rem; font-size: 2rem; font-family: cursive;}

/* you only need the code below. above is just styling */

@media (max-width: 767px) {
  .row.reordered {
    margin: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #red {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }
  #blue {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  #green {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row reordered">
  <div id="green" class="col-sm-12">
    Green
  </div>

  <div id="blue" class="col-sm-4">
    Blue
  </div>

  <div id="red" class="col-sm-8">
    Red
  </div>
</div>

＆＃13;

只需根据需要交换颜色名称即可。：）

Answer 2

使用bootstrap的类是不太可能的，因为你正在改变元素的顺序。

您必须使用flexbox-layout，请参阅 https://jsfiddle.net/sfqzsus2/

您可以使用order: n

更改元素的顺序

在移动设备上重新排列堆积的列

2 个答案: