Visual Chaos vs DOM Order
The order property and flex-direction: row-reverse allow us to change element order on screen without touching HTML. But this carries a hidden threat.
Tab Navigation Problem
Users who navigate the site with keyboard (Tab key) move in order in HTML code, not by what they see on screen.
Bad Example:
You moved the " Buy " button to the beginning of the list via order: -1. A sighted user sees it first, but for a " screen reader " or Tab key, it will still remain last.
Caution
Never use order for important semantic changes. Use it only for purely visual decorations (e.g., swapping image and text on mobile).
Important
Golden accessibility rule: Code order should match interface reading logic.