responsiveflex布局包装问题

Question

我有一个问题有一个特殊的响应柔性布局。
我的目标：

容器2可以有一个静态的。
我已经测试了几个可能的解决方案：对对对桌面容器2桌面

组绝对位置

• 浮动容器2。

是否有不使用浮动或绝对定位的更灵活的解决方案？

Answer 1

你可以用Flexbox做到这一点，如果你有你的容器元素上固定的高度。然后你只需要改变媒体查询元素的顺序。

.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    flex-wrap: wrap; 
 
} 
 
.a { 
 
    background: #2873FD; 
 
} 
 
.b { 
 
    background: #C015FF; 
 
} 
 
.c { 
 
    background: #15FF78; 
 
} 
 
@media(min-width: 480px) { 
 
    .a, .c { 
 
    order: 1; 
 
    flex: 0 0 30%; 
 
    } 
 
    .b { 
 
    order: 2; 
 
    flex: 0 0 100%; 
 
    } 
 
} 
 

 
@media(max-width: 480px) { 
 
    .content > div { 
 
    flex: 1; 
 
    } 
 
}

<div class="content"> 
 
    <div class="a">1</div> 
 
    <div class="b">2</div> 
 
    <div class="c">3</div> 
 
</div>