Bootstrap：在小屏幕上更改容器顺序答案

【问题标题】：Bootstrap: Change container order on small screensBootstrap：在小屏幕上更改容器顺序
【发布时间】：2015-08-18 12:23:59
【问题描述】：

我遇到了引导问题。

在我的 html 页面中，我使用了不同的容器，但我无法在移动屏幕中按照我的需要重新排列和重新组织它们。

Here my Bootply.

为了更清楚，我希望它看起来像这样：

容器 1 和 5 是流体，而 2、3、4 则不是。

如何在小屏幕中将容器 1 和 2 移动到 3 和 4 之后？

提前感谢您的回复！

干杯！

【问题讨论】：

不使用 Bootstrap (AFAIK)...flexbox 可以做到这一点。
弹性，w3schools.com/cssref/css3_pr_order.asp

标签： html css twitter-bootstrap mobile responsive-design

【解决方案1】：

如果不重新排列您的内容，这是不可能的。

一种方法是根据浏览器的宽度制作您要重新排列的区域的两个版本并隐藏它们。这是一种不好的做法，尤其是如果您有一个整个网站要在调整大小时重新排列，但对于一个包含 5 个 div 的小 div 来说，这是一个可以接受的解决方案。

这是修改后的 HTML

<div class="desktopwrapper"> <!-- added a desktop wrapper -->
  <div class="container-fluid green"></div>
  <div class="container red"></div>
  <div class="container ">
    <div class="row">
      <div class="col-sm-8 yellow"></div>
      <div class="col-sm-4 fuxia"></div>
    </div>
  </div>
  <div class="container-fluid blue"></div>
</div>

<div class="mobilewrapper"> <!-- added a mobile wrapper and rearranged content -->
  <div class="container ">
    <div class="row">
      <div class="col-sm-8 yellow"></div>
      <div class="col-sm-4 fuxia"></div>
    </div>
  </div>
  <div class="container-fluid green"></div>
  <div class="container red"></div>
  <div class="container-fluid blue"></div>
</div>

我已经在 CSS 中添加了这些行：

@media screen and (max-width: 766px) {
  .desktopwrapper {
      display:none;
  }
}

@media screen and (min-width: 767px) {
  .mobilewrapper {
      display:none;
  }
}

这基本上是在屏幕调整为 766 像素宽时隐藏一种排列，并显示另一种排列。当然反过来。

你可以试试here。

另一种方法是将所有内容放在一个包装器中，position 包装器relative，将所有 div 放在 absolute 中，然后使用 px 放置它们。然而，当 div 的高度取决于内容时，这真的没有用。最好的方法是像我的例子那样做。

【讨论】：

感谢您的回复，但我会避免重复代码。

【解决方案2】：

flexbox 概念证明。

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  color: white;
  text-align: center;
}
body {
  height: 100%;
}
h2 {
  display: inline-block;
  background: #000;
  padding: .25em;
}
.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  flex: 0 0 75px;
  background: darkgreen;
}
.banner {
  flex: 0 0 100px;
  width: 80%;
  margin: auto;
  background: darkred;
}
main {
  flex: 1;
  width: 80%;
  margin: auto;
  display: flex;
}
.content {
  width: 75%;
  background: yellow;
}
aside {
  width: 25%;
  background: fuchsia;
}
footer {
  flex: 0 0 100px;
  background: lightblue;
}
@media screen and (max-width: 768px) {
  .banner,
  main {
    width: 100%;
  }
  main {
    flex-direction: column;
    order: -1;
  }
  .content,
  aside {
    flex: 1;
    width: 100%;
  }
  aside {
    flex: 0 0 150px
  }
}

<div class="page">
  <header>
    <h2>1</h2>
  </header>
  <div class="banner">
    <h2>2</h2>
  </div>
  <main>
    <div class="content">
      <h2>3</h2>
    </div>
    <aside>
      <h2>4</h2>
    </aside>
  </main>
  <footer>
    <h2>5</h2>
  </footer>
</div>

Codepen Demo

【讨论】：