响应式布局

周末活动列表在桌面可以并排显示三张卡；到了手机，容器要让卡片回到单列，保留标题、说明和操作的可读空间。

• 开始时：三张活动卡使用桌面三列，用户能快速比较活动。
• 完成后：可用宽度变小时改成单列，内容顺序不变，也不制造页面横向滚动。

当需求是让同一活动列表适应不同宽度时，用响应式策略安排断点和降级；Grid 布局 负责行列结构，样式 CSS 负责写出规则。响应式 ≠ 单独一套页面，也不是 CSS 的同义词。

• 想解决手机上卡片太窄，先描述可用宽度和目标排列，再决定使用 Grid、Flex 或其他布局。
• 想改变颜色、边框或字体，处理的是 CSS 外观；想选择二维列结构，处理的是 Grid。

看活动列表的真实界面：标注会落在容器、断点提示、流体宽度、单列降级和活动卡本身。

• 点击编号或说明行可以固定当前部件，悬停离开后仍恢复已固定的部件。
• 容器和活动卡都来自真实 DOM 测量，不用图片坐标猜位置。

桌面并列、平板收窄和手机单列是同一活动列表的不同宽度状态；业务结果留给节点 5。

订单页切换为手机排列后，卡片立即改为单列；标题、时间、地点和操作顺序不变，不额外增加应用按钮。

响应式布局什么时候用、什么时候不用？先看任务边界，再看组件外观。

• 什么时候用：窄屏时调整列数、间距和顺序，内容仍然可读、可点。
• 什么时候不用：移动端如果需要完全不同的任务顺序，应重新安排信息层级，而不是把桌面页面缩得很小。

怎么判断：先看用户要完成的任务和内容关系，再选择职责准确的组件。

请实现周末活动列表的响应式布局：1440px 展示三列活动卡，720px 以下改为两列，390px 和 320px 改为单列；保留每张卡的标题、时间、地点和操作顺序，使用真实 DOM 和项目间距变量，在所有视口下不出现页面横向滚动，也不要通过缩小文字来塞下桌面布局。