假设我有一个这样的flexbox设置：
<div class="flexbox">
<div id="item-1"></div>
<div id="item-2"></div>
<div id="item-3"></div>
</div>
我目前有使用CSS设置flex项目，如下所示：
-------------------------------------------------
| 1 | 2 | 3 |
-------------------------------------------------
我希望项目在屏幕达到特定大小时更改为这种布局：
--------------------
| 3 | 1 |
-----------------------------
| 2 |
-----------------------------
我知道我可以#item-3 {order:-1}将其移到开头，但是遇到问题的部分是将元素1浮动到右边的上方2上方。
任何帮助表示赞赏，谢谢！
最小宽度是解决方案：
.flexbox {
display: flex;
flex-wrap: wrap;
}
.flexbox div {
border: 1px solid #ddd;
padding: 10px;
box-sizing: border-box;
}
#item-1, #item-3 {flex: 1;}
#item-2 {flex: 2;}
@media(max-width: 768px) {
#item-1, #item-3 {
order: 1;
}
#item-2 {
order: 2;
border-top: 0;
min-width: 100%;
}
} <div class="flexbox">
<div id="item-1"></div>
<div id="item-2"></div>
<div id="item-3"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句