如何实现同一步进器在电脑端横排、移动端竖排的适配？

核心问题就是orientation只控制了步进条的排列方向，但没管内容的渲染位置，得把这俩逻辑拆开处理：

• 拆分布局逻辑：别把内容位置和横竖排绑定死，单独做一套内容位置控制的逻辑，和步进条的排列方向解耦
• 横排模式：把所有步骤内容统一放在步进条的尾部，用容器包裹或者CSS类强制让内容占满整行，别插在步骤之间
• 竖排模式：把每个步骤的内容直接嵌在对应步骤项的下方，用flex垂直布局或者相邻选择器来关联步骤和内容
• 动态切换：监听屏幕尺寸变化时，不仅切换步进条的排列方向（或对应CSS类），同时切换内容容器的位置类，比如给内容块加content-after-stepper或content-between-steps来控制显示位置

给个极简的实现示例：

HTML结构 #

<div class="stepper" id="stepper">
  <div class="step-item">步骤1</div>
  <div class="step-content">步骤1的详情内容</div>
  <div class="step-item">步骤2</div>
  <div class="step-content">步骤2的详情内容</div>
  <div class="step-item">步骤3</div>
  <div class="step-content">步骤3的详情内容</div>
</div>

CSS样式 #

/* 横排默认样式 */
.stepper {
  display: flex;
  gap: 2rem;
  align-items: center;
}
/* 横排时隐藏分散的内容，统一显示在尾部 */
.step-content {
  display: none;
}
.content-after-stepper .step-content {
  display: block;
  margin-top: 1.5rem;
  width: 100%;
  order: 99; /* 强制放在最后 */
}

/* 竖排样式 */
.stepper.vertical {
  flex-direction: column;
  align-items: flex-start;
}
.content-between-steps .step-content {
  display: block;
  margin: 0.5rem 0 1.5rem 0;
  width: 100%;
}

JS逻辑 #

function adjustStepperLayout() {
  const stepper = document.getElementById('stepper');
  const isMobile = window.innerWidth < 768;
  
  stepper.classList.toggle('vertical', isMobile);
  stepper.classList.toggle('content-between-steps', isMobile);
  stepper.classList.toggle('content-after-stepper', !isMobile);
}

// 初始化+监听窗口变化
window.addEventListener('resize', adjustStepperLayout);
adjustStepperLayout();

这样不管横竖排，内容位置都能按需求走，不会只改个方向导致内容乱跳。

内容的提问来源于stack exchange，提问作者Yedidya