Question

我想问一下，当屏幕最小化时，是否可以改变网格位置？

例如，正常布局就像这样

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

然后当屏幕最小化时，就像这样

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

我不知道是否可以做到，但感谢提前

Answer 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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: