引导程序：在小屏幕上更改容器顺序

Question

我正面临引导问题。

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

这是我的Bootply。

更明确地说，我希望它看起来像这样：

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

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

预先感谢您的答复！

干杯!

Answer 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;
  }
}

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

您可以在这里尝试。

另一种方法是把在一个包装的一切， position包装relative内的所有div的， absolute ，只是把它们用像素。 但是，当div的高度根据内容而变化时，这实际上没有用。 最好的方法是像我所举的例子一样。

Answer 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演示