屏幕最小化后更改网格的位置答案

【问题标题】：Change the position of grid after screen minimized屏幕最小化后更改网格的位置
【发布时间】：2017-06-12 08:44:11
【问题描述】：

请问屏幕最小化时是否可以改变网格位置？

比如正常的布局是这样的

 _________    __________
|  First  |  |  Second  |
 ---------    ----------

然后当屏幕最小化时，是这样的

 __________ 
|  Second  |
 ----------    
 __________ 
|   First  | 
 ----------

不知道能不能搞定，谢谢提前

【问题讨论】：

你可以使用flex box和order

标签： html css twitter-bootstrap grid

【解决方案1】：

您在谈论媒体查询。你应该看看这里MediaQueries

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-3">
            First
        </div>
        <div class="col-md-9">
            Second
        </div>
    </div>
</div>

适用于 Bootstrap 4。

另一个例子

https://codepen.io/anon/pen/yXOZZV

【讨论】：

我认为问题更多的是改变列的顺序而不是堆叠它们。

【解决方案2】：

您可以使用column ordering 来实现此目的。

body {padding-top:5rem;}
.first, .second {
    padding:1rem;
    border: solid 1px grey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="second col-md-6 col-md-push-6">Second</div>
        <div class="first col-md-6 col-md-pull-6">First</div>
    </div>
</div>

【讨论】：