Html CSS flexbox 3列桌面到2列平板电脑，可重新订购flex项目

我正试图解决flexbox的一个问题，但不知道如何解决

这是我想要的桌面

这是我想要的平板电脑

.wrapper{
显示器：flex；
}
.premiumContent，
.ASIDE1内容，
.ASIDE2内容{
字号：2em；
文本对齐：居中；
颜色：白色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.premiumContent{
顺序：2；
弹性：1；
背景色：红色；
高度：100px；
}
.ASIDE1内容{
顺序：1；
弹性：1；
背景颜色：蓝色；
高度：40px；
}
.ASIDE2内容{
顺序：3；
弹性：1；
背景颜色：绿色；
高度：40px；
}

溢价
旁白1
旁白2

使用媒体查询移动布局：

@media ( max-width: 600px) {
  .wrapper {
    flex-direction: column;
    flex-wrap: wrap;
    height: 80px;
  }
  .premiumContent, .aside1Content, .aside2Content {
    width: 50%;
    flex: 0 0 50%;
  }
  .premiumContent {
    order: 4;
    flex-basis: 100%;
  }
}

---

请注意，Michael_B的解决方案是正确的

flexbox

解决方案。这种方法使用

position:absolute

和

margin right

在移动设备上进行定位，特别是在无法预先确定或在CSS中硬编码父对象高度的情况下

body{padding:0；margin:0；}
.包装纸{
显示器：flex；
调整项目：灵活启动；
}
.wrapper>*{
填充：.5em；
字体大小：1.5rem；
线高：1.5em；
颜色：白色；
弹性：10自动；
框大小：边框框；
}
.premiumContent{
背景色：红色；
线高：3em；
}
.ASIDE1内容{
顺序：-1；
背景颜色：蓝色；
}
.ASIDE2内容{
背景颜色：绿色；
}
@介质（最大宽度：800px）{
.包装纸{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
对齐项目：拉伸；
位置：相对位置；
}
.wrapper>*{
填充：.5em；
字体大小：1.5rem；
线高：1.5em；
颜色：白色；
弹性：10自动；
保证金权利：50%；
}
.wrapper.premiumContent{
最小宽度：50%；
最小高度：100%；
顺序：3；
宽度：50%；
位置：绝对位置；
右：0；
高度：自动；
flex-grow:0；
对齐自我：初始；
右边距：0；
}
.ASIDE1内容{
顺序：首字母；
背景颜色：蓝色；
}
}

溢价
旁白1
旁白2

非常甜蜜。没有硬编码高度的解决方案吗？还有，为什么这不适用于列上的

.premiumContent

的

顺序：3

？我觉得这很奇怪。任何资源都会受到欢迎。@AndreiGheorghiu，列方向容器中需要固定高度，以便flex项目知道包装的位置。如果没有固定的高度，列将无法断开，并且只会随着容器的增长而扩展。我使用了

order:4

，因为桌面布局中已经使用了

order:3

。我知道包装需要固定的高度。我只是想找出一个非js的解决方案来允许这个布局在高度上进行缩放（使用flexbox，而不需要

位置：绝对值

）。非常感谢这个答案，但不幸的是，我不知道元素的高度，因此无法在包装器上使用它。特别是，

premium

div将接收到更多的文本，因此将比其他div更大。能够在没有固定高度的列容器中包装flex项目肯定是一种常见的需求。很好，你正在解决这个问题。@Michael_B我认为flexbox可以满足所有布局需求。显然，我错了非常感谢。在生产中，我想我应该通过将

aside1

和

aside2

移动到包装器中来解决这个问题。非常感谢，我将选择您的解决方案，因为我无法为我的元素预定义高度。请注意，我对它进行了更多测试，在小尺寸上出现了

溢出问题。我修好了，你应该从答案中得到新代码。