html - Bootstrap : Change container order on small screens

Question

我遇到了 Bootstrap 问题。

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

Here my Bootply.

更清楚地说，我希望它看起来像这样:

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

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

预先感谢您的回复!

干杯!

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

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

你可以试试here .

另一种方法是将所有内容都放在包装器中，position 包装器 relative，所有 div 都放在 absolute 中，然后将它们放在一起使用像素。然而，当 div 根据内容改变高度时，这实际上没有用。最好的方法是按照我的例子去做。