css - 在 Bootstrap 3 中重新排序 Div

Question

我有一组这样堆叠的 4 个 div:

第 1 部分

第 2 部分

第 3 部分

第 4 部分

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

第 3 部分

第 2 部分

第 4 部分

我已经知道如何隐藏第一个 div，但找不到重新排序剩余 div 的解决方案。

如有任何帮助，我们将不胜感激。

谢谢， 克拉默

Answer 1

因为您的 div 堆叠在所有网格上并且具有(如我所料)col-xs-12 类。 col-xs-12 类将宽度设置为 100%，这就是为什么您不能使用 float 重新排序您的列(或推和拉，.col-md-push-* 和 .col-md-pull-* 修饰符类，如 http://getbootstrap.com/css/#grid-options 中所述。

可以在以下位置找到可能的解决方案:http://tanalin.com/en/articles/css-block-order/

使用 CSS display:table 你可以:

html:

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

CSS:

@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 */
}