使用CSS实现响应式重新定位DIV

Question

我将尝试让页面布局如下：

桌面视图：

|---------------|--------|
| block 1       | block2 |
|               |        |
|               |--------|
|               | block3 |
|               |        |

移动设备视图：

|---------------|
| block 2       |
|---------------|
| block 1       |
|               |
|               |
|---------------|     
| block 3       |
|---------------| 

目前我可以使用flex-wrap、flex-direction和块的宽度来定位块1和块2。

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.block1 {
  width: 66%;
}

.block2 {
  width: 33%;
}

@media (max-width: 580px) {
  .block1, .block2 { width: 100%; }
  .container { flex-direction: column-reverse; }
}

<div class="container">
  <div class="block1">Block 1</div>
  <div class="block2">Block 2</div>
</div>

如何定位块3？

- Y Borys

Answer 1

您可以这样做：

body {margin: 0}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 100vh; /* height needs to be defined otherwise not possible with flex */
}

.block1 {background: khaki}
.block2 {background: lightgreen}
.block3 {background: lightblue}

.block1 {flex-basis: 100%; width: 66.66%}
.block2, .block3 {flex: 1; width: 33.33%}

@media (max-width: 580px) {
  .container > * {width: initial}
  .block1 {flex: 2} /* makes it twice as "tall" */
  .block2 {order: -1} /* placed above .block1; it's 0 by default */
}

<div class="container">
  <div class="block1">Block 1</div>
  <div class="block2">Block 2</div>
  <div class="block3">Block 3</div>
</div>

- VXp