如何用純CSS反轉僅某些div的子元素的順序？

例如:

我想要

<div id="parent">
    <a>A</a>
    <a>B</a>
    <a>C</a>
    <a>D</a>
    <div id="sub-child">
        <a>X</a>
        <a>Y</a>
        <a>Z</a>
   </div>
</div>

顯示為:

D

C

B

A

X

Y

Z

我試過了:

#parent {
    display:flex;
    flex-direction: column-reverse; 
}

然而，它正在逆轉父代內部的一切(沒有給出期望的結果)

#parent {
 display: flex;
 flex-direction: column-reverse;
}

#sub-child {
  order: -1;
  display: flex;
  flex-direction: column;
}

<div id="parent">
    <a>A</a>
    <a>B</a>
    <a>C</a>
    <a>D</a>
    <div id="sub-child">
      <a>X</a>
      <a>Y</a>
      <a>Z</a>
    </div>
</div>