Question

如何在一行内响应性地重新排序列？我有一个页面网站，有5个部分，每个部分都有100％宽度和高度的屏幕尺寸。

我在第一部分的桌面上有A和C包含background-image的图像，B是带h1元素的div）：< / p>

 ----------------------------------------
|          |                  |          |
|          |                  |          |
|    A     |        B         |     C    |
| col-lg-3 |     col-lg-6     | col-lg-3 |
|          |                  |          |
|          |                  |          |
 ----------------------------------------

我希望在小屏幕（智能手机）上拥有什么：

 -------------
|             |
|      B      |
|             |
 -------------
|      |      |
|      |      |
|   A  |   C  |
|      |      |
|      |      |
 -------------

我尝试使用bootstrap的push和pull类，但是他们打破了我的单页布局，我希望将A，B和C保留在一个全屏部分中。任何帮助赞赏:)非常感谢！

编辑：

以下是我的一些HTML：

<div class="row section first">
  <div class="col-sm-12 col-lg-6" id="B"><h1>Header</h1></div>
  <div class="col-sm-6 col-lg-3 col-lg-pull-6" id="A"></div>
  <div class="col-sm-6 col-lg-3" id="C"></div>
</div>

<div class="row section second">
  <div>second section content...</div>
</div>

...和我的CSS片段：

body {
  width: 100vw;
}

.section {
  height: 100vh;
}

#B h1 {
  font-family   : 'Lobster', Impact;
  font-weight   : 400;
  font-size     : 8vw;
  letter-spacing: -4px;
  position      : relative;
  top           : 30%;
  color         : #66678B;
  margin-top    : 300px;
  text-shadow   : 5px 5px rgb(226, 226, 233);
}

div#A {
  background         : url('./img/A.png') no-repeat;
  background-size    : contain;
  background-position: bottom center;
  height             : 100%;
  margin-top         : 25px;
  margin-right       : -75px;
  padding-top        : 5px;
}

div#C {
  background         : url('./img/C.png') no-repeat;
  background-size    : contain;
  background-position: bottom center;
  height             : 100%;
  margin-top         : 25px;
  margin-left        : -75px;
  padding-top        : 5px;
}

Answer 1

flexbox可以做到

* {
  box-sizing: border-box;
}
.container {
  width: 50%;
  margin: 10px auto;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.a,
.b,
.c {
  height: 50px;
  border: 1px solid grey;
  order: 1;
  line-height: 50px;
}
.b {
  flex-grow: 2;
  /* twice as wide */
  flex-basis: 100%;
  background: lightblue;
  order: 0;
  /* move the element to first in line */
}
.a,
.c {
  flex-basis: 50%;
  background: red;
  flex-grow: 0;
}
.c {
  background: lightgreen;
}
@media screen and (min-width: 600px) {
  .container {
    flex-direction: row;
    flex-flow: nowrap;
  }
  .a,
  .b,
  .c {
    flex: 1;
    flex-grow: 1;
    order: 1;
  }
}

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

JSfiddle Demo

Answer 2

<div class="container">
  <div class="row">
    <div class="b col-sm-12 col-lg-6 col-lg-push-3">B</div>
    <div class="a col-sm-6 col-lg-3 col-lg-pull-6">A</div>
    <div class="c col-sm-6 col-lg-3">C</div>
  </div>
</div>

fiddle

a类中的

b，c和div 不是必需的，仅用于演示目的。

Answer 3

要设计此布局，您可以尝试使用移动优先方法。也就是说，首先在小屏幕上设计布局，然后在“拉”和“推”类的帮助下设计更大的布局。

在这种情况下，首先是第二个布局：

<div class="row">
  <div class="col-sm-12"> B </div>
  <div class="col-sm-6"> A </div>
  <div class="col-sm-6"> C </div>
</div>

然后修改它以适合第一个布局：

<div class="row">
  <div class="col-sm-12 col-lg-6"> B </div>
  <div class="col-sm-6 col-lg-3 col-lg-pull-6"> A </div>
  <div class="col-sm-6 col-lg-3"> C </div>
</div>

在一行内响应性地重新排序列

3 个答案: