Is there anyway to reorder of row <tr> in table by css?

Question

I have a table with 3 row like below. How can I change the order of row by CSS? Example:

1. Name: A B C
2. Age: 1 2 3
3. Country: US CA CN

And I want it become:

1. Country: US CA CN
2. Name: A B C
3. AGE: 1 2 3

<table class="details">
  <tbody>
    <tr class="name">
        <td class="label"><label for="name">Fullname</label></td>
        <td class="value name-wrapper">name</td>
    </tr>
    <tr class="Age">
        <td class="label"><label for="age">Age</label></td>
        <td class="value age-wrapper">26</td></tr>
        
    <tr class="Country">
        <td class="label"><label for="country">Country</label></td>
        <td class="value country-wrapper">US</td></tr>
  </tbody>
</table>

Answer 1

You can use flex-direction: column-reverse on parent elements to reverse the order of their children. Use flex-direction: row-reverse for rows.

tbody { display: flex; flex-direction: column-reverse; }

<table class="details">
  <tbody>
    <tr class="name">
        <td class="label"><label for="name">Fullname</label></td>
        <td class="value name-wrapper"></td>
    </tr>
    <tr class="Age">
        <td class="label"><label for="age">Age</label></td>
        <td class="value age-wrapper"></td>
    </tr>
    <tr class="Country">
        <td class="label"><label for="country">Country</label></td>
        <td class="value country-wrapper"></td>
    </tr>
  </tbody>
</table>