Reverse the order of only certain Div children elements

How can you reverse the order of only certain div's children elements with pure CSS?

For example:

I want

<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>

to be displayed as:

D

C

B

A

X

Y

Z

I tried:

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

However, It is reversing everything inside parent (Not giving desired result)

1. apply display: flex on both #parent and #sub-child;
2. give flex-direction: column-reverse for the #parent and flex-direction: column for #sub-child;
3. use a negative order for #sub-child so to keep that node at the bottom

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

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

<!-- language: lang-html -->

<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>

<!-- end snippet -->