我想使用display: flex来更改带有line类的 div的顺序，但我想保持这个 TAB 导航顺序： A ? 乙？C ？D.
正如您在片段中看到的，第一个示例工作正常（DOM 序列与 Order 相同），但在第二个示例中，选项卡遵循 DOM 序列。
有机会不使用javascript吗？
.container {
display: flex;
flex-direction: column;
}
.line {
padding: 5px;
border: 1px solid gray;
margin-bottom: 5px;
}
.line span {
margin-left: 7px;
}<h2>
Tabbing navigation OK
</h2>
<div class="container">
<div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div>
<div class="line" style="order: 2;"><input value="B"><span>2nd div - Order: 2</span></div>
<div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div> …