使网格系统中单元格的垂直重新排序响应迅速

Question

我有这样的布局：

+--X---------------+--Y---+
|                  |  A   |
|                  + ---- +
|                  |  B   |
+------------------+------+

其中 X = #main-col 和 Y = #plugin-col 以及 A 和 B 为 .plugin:

<div class="row">
  <div class="col-md-9" id="main-col">…</div>
  <div class="col-md-3" id="plugin-col">
    <div class="plugin">A</div>
    <div class="plugin">B</div>
  </div>
</div>

现在我正在使用这个 JavaScript:

$('#main-col').toggleClass('col-md-9 col-md-12');
$('#plugin-col').toggleClass('col-md-3 col-md-12 row');
$('#plugin-col .plugin').toggleClass('col-md-3');

实现此布局：

+--X----------------------+
|                         |
|                         |
|                         |
+------+------+-----------+
|  A   |  B   |
+------+------+

有没有一种方法可以在浏览器 window 缩小到一定宽度时自动响应地实现 A 和 B 单元格的水平 <-> 垂直重新排序？

Answer 1

不需要 JS 只需再添加一个 row 并使用 bootstrap 列即可获得所需的结果。 DEMO

<div class="row">
  <div class="col-md-9" id="main-col">…</div>
  <div class="col-md-3" id="plugin-col">
    <div class="row">
      <div class="plugin col-md-12 col-lg-12 col-xs-6">A</div>
      <div class="plugin col-md-12 col-lg-12 col-xs-6">B</div>
    </div>
  </div>
</div>

使网格系统中单元格的垂直重新排序响应迅速

Make vertical reordering of cells in grid system work responsively

javascript

html

css

twitter-bootstrap

twitter-bootstrap-4