Question

第一张图片在PC上显示网格：第二张图像在移动设备上显示网格：

如您所见，我需要更改订单和网格。我尝试使用flexbox，但我需要在PC上对B＆amp; C进行分组，并获得相同的高度。

重要条件：

在PC上A高度等于总和B和C
在手机上我收到订单：B，A，C

我知道我可以使用简单的双倍时间B块并使用show / hide，但这在我的项目中是不可接受的。

Answer 1

如果我理解你的要求，那就是答案。

为了便于查看，我使用悬停状态而不是媒体查询进行了更改。

诀窍是在PC版

中取出弹性布局A.

＆＃13;

.container {
  border: solid 1px black;
  margin: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 400px;
}

.container > div {
  width: 200px;
  font-size: 50px;
}

.a {
  background-color: tomato;
  eight: 100%;
  osition: absolute;
}

.b {
  background-color: lightgreen;
  height: 140px;
}

.c {
  background-color: lightblue;
  height: 200px;
  order: 3;
}

.container div {
  width: 50%;
}

.container .a {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 50%;
  height: 100%;
}

.container div {
  align-self: flex-end;
}


.container:hover .a {
  position: static;
  height: 130px;
  order: 2;
}

.container:hover div {
  width: 100%;
}

＆＃13;

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

＆＃13;

Answer 2

如果你知道外部wrapper的高度是什么，这是一个演示 - 例如，它是以下示例中的视口高度：

＆＃13;

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}
.wrapper > div {
  border: 1px solid;
  width: 50%;
  height: 50%;
}
.wrapper > div:first-child {
  height: 100%;
}
.wrapper > div:last-child {
  margin-left: auto;
  position: relative;
  top: -50%;
}
@media only screen and (max-width: 650px) {
  .wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: initial;
  }
  .wrapper > div {
    width: 100%;
  }
  .wrapper > div:first-child {
    order: 2;
  }
  .wrapper > div:last-child {
    order: 3;
    top: 0;
  }
}

＆＃13;

<div class="wrapper">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

＆＃13;

将B和C打包到容器中时，这是一个演示。请注意，此处无法在移动视图中获取B - A - C - A - B - C是可能的。请参阅以下代码段：

＆＃13;

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
}
.wrapper > div:first-child {
  width: 50%;
  border: 1px solid;
}
.wrapper > .inner-wrap {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.wrapper > .inner-wrap > div {
  width: 100%;
  border: 1px solid;
}
@media only screen and (max-width: 650px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  .wrapper > div:first-child {
    width: 100%;
  }
  .wrapper > .inner-wrap {
    width: 100%;
  }
}

＆＃13;

<div class="wrapper">
  <div class="content">
    <p>A</p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
    sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
  </div>
  <div class="inner-wrap">
    <div class="content">
      <p>B</p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </div>
    <div class="content">
      <p>C</p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </div>
  </div>
</div>

＆＃13;

<强>结论：

我想如果你不知道flexbox的确切高度，你就无法在移动视图中实现订单以及PC中的布局。

让我知道您对此的反馈。谢谢！

Flexbox按列更改订单

2 个答案: