How to make a list backwards?

Question

css

On my site, when changing the language, the rtl attribute is added to the body so that all content is displayed from right to left.

I have a problem with footer. How to align the footer in the middle of the page horizontally, but so that the first word in the list is the last

<div class="footer_block">
    <ul>
        <a href="#"><li>Terms of Use</li></a>
        <a href="#"><li>Cookies Policy</li></a>
        <a href="#"><li>Privacy Policy</li></a>
    </ul>
</div>

I wrote these styles:

.rtl .footer_block {
    text-align: center;
}

.rtl .footer_block li {
    float: right;
}

.rtl .footer_block ul {
    width: 50%;
    margin: 0 auto;
}

In my opinion, this is not the best option, because it does not align the footer in the middle, and the number of li in the future through the admin panel may change. Please advise how best to do this

Answer 1

flex-direction: row-reverse; can reverse the order of the elements in a string

Answer 2

Artisanal, option.
Mb CSS connoisseurs know how to make on it.

var parent = document.body.querySelector('.footer_block');
var arr = Array.from(parent.querySelectorAll('footer_block')).reverse();
for(let tag of arr) {
 parent.append(tag)
}