Css 将B舱放置在A舱顶部

嗨，我正在努力解决这个问题

桌面：

A组

B组

但是在响应过程中，

div

s必须改变其位置，如下所示：

响应性：

B组

A组

我发了一封信：

#a{
高度：50px；
宽度：100%；
背景色：红色；
}
#b{
高度：50px；
宽度：100%；
背景颜色：绿色；
}

第一组
第二组

您可以从CSS网格布局使用

部分{
显示：网格；
网格自动行：最小最大值（50px，自动）
}
#a{
背景色：红色；
}
#b{
背景颜色：绿色；
}
@介质（最大宽度：768px）{
#b{
网格行：1
}
}

第一组
第二组

如果您需要支持较旧的浏览器，也可以用这种方式。但这只适用于元素具有固定高度的情况，否则您将不得不玩一些其他游戏

#a{
高度：50px；
宽度：100%；
背景色：红色；
}
#b{
高度：50px；
宽度：100%；
背景颜色：绿色；
}
@介质（最大宽度：768px）{
#a{
位置：相对位置；
顶部：50px；
}
#b{
位置：相对位置；
顶部：-50px；
}
}

第一组
第二组

这里是另一个答案，有两个选择器和一条规则：

变换：比例（-1）


/*以容器及其直接子容器为目标*/
分区，
div>*{
变换：比例（-1）；
}
@介质（最小宽度：768px）{
分区，
div>*{
变换：比例（1）；
}
#德尔{
文字装饰：无；
}
#一个移民{
显示：无；
}

HTML Ipsum呈现
佩伦茨克居住者莫比·特里斯蒂克塞内特斯和马莱苏达著名的埃吉斯塔斯。码头前庭，世仇，尤里西斯·埃吉斯，临时的埃米特，安特。不要让自由的人坐在埃吉斯塔斯·森佩尔的座位上。埃内斯·尤里弗德·利奥。奎斯·埃米特坐在埃米特和萨皮安的座位上ra.Ventabulum erat wisi，调味品sed，
commodo vitae
，ornare sit amet，wisi.Aenean发酵剂，elit eget tincidunt调味品，eros ipsum rutrum orci，
猫科动物turpis pulvinar facilisis的节律性腔隙矢状体

你只想让绿色的在红色的上面吗？解释你的问题@pandaniney你也有flex-flow:column-reverse；）