css - 在移动设备上重新排列堆叠的列

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

不幸的是，所有前缀都是必需的(目前):

#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;
  }
}

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

只需根据需要交换颜色名称。 :)