The flex-direction property specifies the direction of the flexible items.

<div class="flex_container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>

.flex_container {
    flex-direction: row-reverse;
}

Default value	row
Inherited values	no
Can it be animated?	no

These are the allowed values.

Value	Description
row	The flexible items are displayed horizontally, as a row (default)
row-reverse	Same as row, but in reverse order
column	The flexible items are displayed vertically, as a column
column-reverse	Same as column, but in reverse order
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.flexDirection = 'row-reverse';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.flexDirection = 'row-reverse';
}
</script>

---