Html 如何覆盖元素堆叠的默认顺序？

我正在创建一个响应性的登录页，其中有几行

每行由2个并排的div元素组成，一个带有图像，另一个带有文本

如果一行的左边是图像，右边是文本，那么下一行的右边是图像，左边是文本

问题是，对于较窄的屏幕，我希望带有文本的div总是堆叠在带有图像的div的顶部

我如何实现这种响应行为

这是我的密码笔：

部分{
背景图像：线性渐变（至底部，#eee，#fff）；
}
.内容{
填充顶部：60px；
填充底部：60px；
宽度：90%；
保证金：自动；
显示器：flex；
柔性包装：包装；
}
.内容.文字{
填充：50px；
背景颜色：粉红色；
}
.内容.插图{
背景颜色：浅蓝色；
}

乱数假文
超过断点时，粉红色div应始终堆叠在顶部

A.
乱数假文
超过断点时，粉红色div应始终堆叠在顶部

根据您的具体需求，有多种解决问题的方法

一种方法是使用

order

属性和媒体查询

试试这个：

@media ( max-width: 800px ) {
  .content      { flex-wrap: wrap; }
  .illustration { order: 1; }
}

部分{
背景图像：线性渐变（至底部，#eee，#fff）；
}
.内容{
填充顶部：60px；
填充底部：60px；
宽度：90%；
保证金：自动；
显示器：flex；
/*柔性包装：包装*/
}
.内容.文字{
填充：50px；
背景颜色：粉红色；
}
.内容.插图{
背景颜色：浅蓝色；
}
@介质（最大宽度：800px）{
.content{flex wrap:wrap；}
.插图{顺序：1；}
}

乱数假文
超过断点时，粉红色div应始终堆叠在顶部

A.
乱数假文
超过断点时，粉红色div应始终堆叠在顶部

根据您的具体需求，有多种解决问题的方法

一种方法是使用

order

属性和媒体查询

试试这个：

@media ( max-width: 800px ) {
  .content      { flex-wrap: wrap; }
  .illustration { order: 1; }
}

部分{
背景图像：线性渐变（至底部，#eee，#fff）；
}
.内容{
填充顶部：60px；
填充底部：60px；
宽度：90%；
保证金：自动；
显示器：flex；
/*柔性包装：包装*/
}
.内容.文字{
填充：50px；
背景颜色：粉红色；
}
.内容.插图{
背景颜色：浅蓝色；
}
@介质（最大宽度：800px）{
.content{flex wrap:wrap；}
.插图{顺序：1；}
}

乱数假文
超过断点时，粉红色div应始终堆叠在顶部

A.
乱数假文
超过断点时，粉红色div应始终堆叠在顶部

您还可以使用flexbox为文本位于左侧、图像位于右侧的元素添加一个类

@介质（最大宽度：800px）{
.content{flex direction:列反转；}
}

您还可以使用flexbox为文本位于左侧、图像位于右侧的元素添加一个类

@介质（最大宽度：800px）{
.content{flex direction:列反转；}
}