Question

我有一组4个div堆叠如下：

Div 1

Div 2

Div 3

Div 4

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

Div 3

Div 2

Div 4

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

非常感谢任何帮助。

谢谢， TKramer

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

Answer 2

在DOM中同时拥有1.2.3.4和3.2.4的最简单的解决方案，并使用页面大小来决定显示哪个。

在Bootstrap 3中重新排序Div

2 个答案: