我想在flex-items樣式中將不同的順序編碼到css變量中，然后使用:checked psudo-class切換編碼順序。

然而，我不知道如何避開范圍問題。有人能幫我修一下嗎？

.expandable {
  order: var(--oldest);
  background-color:lightblue;
}

#expand-toggle:checked ~ * .expandable {
  order: var(--newest);
  background-color:darkseagreen;
}

<input type="checkbox" id="expand-toggle" />

<div style="display: flex; flex-direction: column">
  <div class="expandable" style="--newest: 1; --oldest: 4; order: var(--oldest);" >A</div>
  <div class="expandable" style="--newest: 2; --oldest: 3; order: var(--oldest);" >B</div>
  <div class="expandable" style="--newest: 3; --oldest: 2; order: var(--oldest);" >C</div>
  <div class="expandable" style="--newest: 4; --oldest: 1; order: var(--oldest);" >D</div>
</div>

.expandable {
  order: var(--oldest);
  background-color:lightblue;
}

#expand-toggle:checked ~ * .expandable {
  order: var(--newest);
  background-color:darkseagreen;
}

<input type="checkbox" id="expand-toggle" />

<div style="display: flex; flex-direction: column">
  <div class="expandable" style="--newest: 1; --oldest: 4;" >A</div>
  <div class="expandable" style="--newest: 2; --oldest: 3;" >B</div>
  <div class="expandable" style="--newest: 3; --oldest: 2;" >C</div>
  <div class="expandable" style="--newest: 4; --oldest: 1;" >D</div>
</div>