Can I dynamically change the page layout in order to accommodate the window size?

问题

I have my website like this, with rows and cols (col-xs, col-sm, ... for the various media sizes):

However when the browser gets reduced horizontally (or because the screen is narrow) the result is like this and poor kitty gets crushed:

Is there a way with bootstrap to make the layout change radically when the window gets too reduced that the previous layout makes no sense anymore? Something that would turn the first layout into this:

Thanks!

回答1:

Whether this can be incorporated into Bootstrap I do not know but flexbox can do that.

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>

回答2:

If using Bootstrap and supporting < IE10, you can utilize the push/pull classes to reverse the content order at different break points:

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

If you need #Panel3 to be the same height then you need to look at fixed dimensions or flex box + fall backs.

来源：https://stackoverflow.com/questions/31537723/can-i-dynamically-change-the-page-layout-in-order-to-accommodate-the-window-size

标签

twitter-bootstrap

css

twitter-bootstrap-3

material-design