如何实现 css 布局随着屏幕宽度变化？-灵析社区

我的需求：css 使用 flex 帮我实现一个效果：左侧是一个图片，设置宽高为 200x200，右侧是一段文本；然后当在大尺寸的屏幕上，让右边的文本边充满右侧；但是如果在小尺寸的屏幕上，比如手机，那么让图片显示在上面；文本显示在下面 chatGPT 给了我下面的代码 Flexbox Example .container { display: flex; flex-direction: row; /* 默认水平布局 */ } .image { width: 200px; height: 200px; background-color: #f0f0f0; margin-right: 20px; /* 图片和文本之间的间距 */ } .text { flex: 1; /* 右侧文本占据剩余空间 */ } /* 在小尺寸屏幕上媒体查询 */ @media screen and (max-width: 600px) { .container { flex-direction: column; /* 垂直布局 */ } .image { margin-bottom: 20px; /* 图片下方留出间距 */ } } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat placerat lorem. 但是渲染出来的布局效果并不会随着屏幕宽度而变化  只会等比例变化，为什么？  如何实现 css 布局随着屏幕宽度变化？