最直接的响应式手段是用媒体查询切换 flex-direction：小屏 column、大屏 row；配合 flex-wrap、flex-basis 控制换行；基础样式声明 display: flex，媒体查询仅覆盖变化属性；order 可调整视觉顺序但不影响可访问性。
媒体查询里改 flex-direction 是最直接的响应式手段
小屏幕竖排、大屏幕横排，本质就是切换 flex-direction。别绕弯子写 JS 控制类名，纯 CSS 就能搞定：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
@media (min-width: 769px) {
.container {
flex-direction: row;
}
}注意断点值要和设计稿对齐，768px 是常见平板分界，但如果你的导航栏在 640px 就挤不下了，就该用 640px。
用 flex-wrap 配合 flex-basis 控制换行行为
单行布局在窄屏下容易溢出，这时候不能只靠 flex-direction，得让子项“主动换行”：
.grid {
display: flex;
flex-wrap: wrap;
}
.grid > * {
flex: 1 1 250px; /* 不强制固定宽，允许压缩或撑开 */
}
@media (max-width: 480px) {
.grid > * {
flex-basis: 100%; /* 小屏下单列占满 */
}
}关键在 flex-basis：它比 width 更尊重 Flex 容器的分配逻辑；设为 100% 后，flex-grow 和 flex-shrink 依然生效，不会锁死尺寸。
别在媒体查询里重写整个 display: flex
有人习惯在每个断点都写一遍 display: flex，这是冗余且易出错的：
/* ❌ 不要这样 */
@media (max-width: 768px) {
.nav { display: flex; justify-content: space-between; }
}
@media (min-width: 769px) {
.nav { display: flex; flex-direction: row; }
}正确做法是基础样式先声明 display: flex，媒体查询只覆盖需要变的部分：.nav {
display: flex;
justify-content: center;
}
@media (min-width: 769px) {
.nav {
justify-content: space-between;
}
}否则一旦漏写某个断点，display 可能退化成 block，整块布局就塌了。
order 属性在响应式中常被低估
视觉顺序和 DOM 顺序不一致时（比如移动端把侧边栏提到顶部），order 比移动 HTML 更轻量：
.main { order: 2; }
.sidebar { order: 1; }
@media (min-width: 1024px) {
.main { order: 1; }
.sidebar { order: 2; }
}注意：order 只影响视觉流，不影响可访问性顺序（屏幕阅读器仍按 HTML 顺序读），如果语义层级有变化，得配合 aria-order 或重构 DOM。 
