Css 在Bootstrap 3中重新排序div

我有一套4个div，按如下方式堆叠：

第一组

第2组

第3组

第4组

当浏览器宽度为sm或xs时，我需要隐藏第一个div并重新打包剩余的div：

第3组

第2组

第4组

我已经知道如何隐藏第一个div，但是找不到一个解决方案来重新排序重新生成的div

任何帮助都将不胜感激

谢谢，

---

TKramer是在DOM中同时包含1.2.3.4和3.2.4的最简单的解决方案，并使用页面大小来决定显示哪一个。因为您的div堆叠在所有网格上，并且具有（正如我所期望的）

col-xs-12

类。

col-xs-12

类将宽度设置为

100%

，这就是为什么不能使用

float

对列进行重新排序（或者使用push-and-pull、.col-md-push-*和.col-md-pull-*修饰符类，如中所述）

可以在以下位置找到可能的解决方案：

使用CSS

display:table

可以执行以下操作：

html:

---

我还没有建立起升级或降级这个答案的声誉，所以我只想声明，虽然这可能是最简单的解决方案，但不是最好的解决方案。这是唯一的纯css3解决方案。可以使用javascript重新排序。

<div class="container"> 
<div class="row">
  <div class="col-xs-12" id="div1"> DIV 1 </div>
  <div class="col-xs-12" id="div2"> DIV 2 </div>
  <div class="col-xs-12" id="div3"> DIV 3 </div>
  <div class="col-xs-12" id="div4"> DIV 4 </div>
</div>

@media (max-width:767px) {
.row {display: table; width: 100%; }
#div1 {display: none;}
#div3 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#div2 {display: table-row-group;    } /* Will be displayed in the middle */
#div4 {display: table-header-group; } /* Will be displayed at the top */
}