Html 无媒体查询的响应式布局

我最近刚刚学习了CSS网格，我想知道是否有一种方法可以在不使用媒体查询或基于大小的断点的情况下完成特定的布局

我有一个非常简单的3区域网格。在大型视口中，屏幕左侧有一张图片，图片右侧有一个标题，标题下方有一些描述图像的文本。图像设置所使用的垂直空间量

在移动设备上，它变为一个单独的垂直列，标题显示在图像之前，然后是图像，然后是描述

有关视觉描述，请参见所附图片。在图像中，标记为1的框是图像，2是标题，3是说明

我知道这可以通过媒体查询和大小断点来实现，但我感觉有一个CSS网格或Flex解决方案我没有看到

谢谢你的时间

---

CSS网格用于响应性设计，特别是使用媒体查询。我不鼓励积极寻求避免使用媒体查询-一旦你掌握了它们，它们可以取得一些伟大的成果。以下内容可作为起点

.grid{
宽度：80vw；
保证金：1rem自动；
显示：网格；
网格模板列：3fr 2fr；
网格模板行：重复（3180px）；
网格间距：1rem；
}
.grid分区{
边框：1px实心#4d；
最小高度：100%；
}
.网格分区：第n个类型（1）{
网格行：1/4；
}
.网格分区：第n个类型（3）{
网格行：2/4；
}
@仅介质屏幕和（最大宽度：600px）{
.电网{
网格模板列：1fr；
网格模板行：重复（6150px）；
}
.网格分区：第n个类型（1）{
网格行：2/5；
}
.网格分区：第n个类型（3）{
网格行：5/7；
}
}

网格的全部要点是使用

@media

查询来更改其布局。这很有意义！我看到一些很酷的设计，使用网格自动流，虽然我错过了一个设计概念。结果证明我错了。谢谢你的回答。