我是否可以动态更改页面布局以适应窗口大小？

Question

我有我的网站就是这样，用行和cols（COL-XS，COL-SM，...用于各种介质尺寸）：

然而，当浏览器被水平地缩小（或因为屏幕窄）的结果是这样和小猫可怜的被粉碎：

是否有与引导的方式，使布局大起大落，当窗口过于降低，以前的布局，使得无感觉了吗？东西会变成第一个布局成这样：

谢谢！

Answer 1

这是否可以合并到Bootstrap中我不知道，但flexbox可以做到这一点。

Codepen Demo

.container { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid grey; 
 
    margin: 25px auto; 
 
    display: flex; 
 
} 
 
.col { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1 0 auto; 
 
    color: orange; 
 
    text-align: center; 
 
    order: 1; 
 
} 
 
.box { 
 
    flex: 1 0 auto; 
 
    background: #000; 
 
    margin: 10px; 
 
} 
 
@media screen and (max-width: 760px) { 
 
    .container { 
 
    flex-direction: column; 
 
    } 
 
    .col:nth-child(2) { 
 
    order: -1 
 
    } 
 
    .col:nth-child(1) { 
 
    flex-direction: row; 
 
    } 
 
}

<div class="container"> 
 
    <div class="col"> 
 
    <div class="box">1</div> 
 
    <div class="box">2</div> 
 
    </div> 
 

 
    <div class="col"> 
 
    <div class="box">3</div> 
 
    </div> 
 
</div>

Answer 2

如果使用引导和支持< IE10，你可以利用推/拉班不同的破发点，以扭转内容顺序：

#Panel1{background-color:#999; padding 20px} 
 
#Panel2{background-color:#aaa; padding 20px} 
 
#Panel3{background-color:#CCC; padding 20px}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-sm-5 col-sm-push-7" id="Panel3"> Panel 3 </div> 
 

 
<div class="col-sm-7 col-sm-pull-5"> 
 
<div class="row"> 
 
    <div class="col-xs-6 col-sm-12" id="Panel1"> Panel 1 </div> 
 
    <div class="col-xs-6 col-sm-12" id="Panel2"> Panel 2 </div> 
 
</div> 
 
</div>

如果您需要＃Panel3的高度相同，那么您需要查看固定尺寸或弹性盒+背部。