我正在一个团队中尝试为定制的多商店电子商务平台创建单页结账。使用响应式设计，我们希望我们的结帐以桌面大小显示为单个页面，并在移动大小的显示器上以手风琴风格显示。
我们有 4 个“面板”用于数据输入/显示
- 地址详细信息 - 7 个文本表单域和一个列表框选择器
- 运送方式 - 2 个单选按钮
- 付款方式 - 带有可选表单字段输入的列表框选择器，具体取决于所选的列表选项
- 审查和确认 - 随着输入面板中的数据发生变化，使用 Ajax 即时更新篮子摘要，加上提交按钮
在桌面尺寸下，这 4 个面板将并排显示在 4 列中，因此用户可以在一页上看到所有选项。在移动设备尺寸下，我们可以让这些面板重排到一个非常长的页面中，但我们更愿意折叠面板，以便一次只能看到一个结帐的“阶段”。面板标题将始终显示在每个手风琴级别的顶部，位于当前阶段内容的上方或下方，具体取决于用户所在的位置。点击折叠的标题应展开该面板并折叠当前打开的面板，以便一次只能看到一个面板。
在研究中，我找不到任何在响应式设计中使用此功能的实时示例。我们的首席设计师告诉我们，每个显示版本的输入都必须存储在两个单独的数据集中，并使用 Javascript 在每次更改时同步。我们希望避免页面因过多的代码而过载，因此我们正在寻找一种方法来显示桌面版本上显示的相同输入/输出面板，因为当响应式站点的大小超过移动断点时，具有手风琴行为的手风琴面板。
首先考虑这款手机，我们认为答案可能在于首先创建手风琴，然后以某种方式对其进行编码以删除桌面大小的手风琴样式功能，以便可以操纵手风琴的各个部分以并排显示。
收到所有答案。