使用css响应式重新定位div [重复]

Posted 2023-03-05

【中文标题】使用css响应式重新定位div [重复]

【英文标题】：Responsive re-positioning div with css [duplicate]

【发布时间】：2018-10-21 18:47:06

【问题描述】：

我试图让我的页面布局如下：

桌面视图：

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

移动视图：

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

目前我可以用flex-wrapflex-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？

【参考方案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>