Use HTML dir to set base text direction and CSS flex-direction: row-reverse to reverse a flex row’s flow. When arranging cards on a public page from your Mac, first decide whether you need to change text direction, item sequence, or alignment.

This guide assumes you are editing a page’s HTML and CSS in a text editor and previewing it in a desktop browser. The task is to arrange three neutral tiles—Alpha, Beta, and Gamma—while keeping text behavior and document order intentional.

What does each direction setting actually change?

HTML’s dir attribute describes the base direction of an element’s text. Its explicit values are ltr and rtl; auto asks the browser to determine direction from the content. WHATWG encourages authors to express text direction through HTML so that the information remains available without CSS. HTML Standard: The dir attribute.

CSS direction also controls base text direction and participates in layout behavior. It is inherited, so setting direction: rtl on a container can affect its descendants. MDN recommends using HTML dir where possible. Treat a CSS direction override as a deliberate text-direction decision, rather than a convenient way to move boxes. MDN: direction.

CSS flex-direction controls a flex container’s main axis. A row follows the inline axis of the current writing mode; row-reverse swaps its main-start and main-end directions. It changes the direction in which items are laid out, while preserving their source sequence. W3C: Flex Flow Direction.

These mechanisms interact. With horizontal writing, an ltr flex row starts on the left, while an rtl flex row starts on the right. Adding row-reverse reverses either starting direction. Consequently, row-reverse does not always mean that the first item appears on the right. MDN: flex-direction.

Which setting matches your intended result?

Before editing, write down the desired result in concrete terms: “Keep the English labels unchanged, place the tiles in reverse visual order, and keep the group on the right.” That statement identifies separate decisions about text, item flow, and alignment.

Intended result Appropriate starting point What to check
Set the content’s base text direction HTML dir="ltr" or dir="rtl" Apply it to the scope whose text requires that direction.
Reverse every item’s visual progression in a flex row flex-direction: row-reverse Check the container’s existing direction first.
Move an unchanged row toward its main-end edge justify-content: flex-end Ensure free space exists for alignment.
Change the meaningful sequence everywhere Reorder the source elements Confirm that the resulting reading sequence makes sense.
Reposition selected items visually Individual order values Review the difference between visual and source order.

The distinction between reversal and alignment matters. With an ltr row, justify-content: flex-end can place Alpha, Beta, and Gamma together on the right without reversing their sequence. Alignment distributes available main-axis space; flex-end refers to the flex container’s main-end side. Its effect can disappear when flexible items consume that space. MDN: justify-content.

For a sequence that readers must encounter in a particular order, establish that sequence in the document itself. W3C explicitly cautions against using flex reversal or order to compensate for incorrect source ordering. W3C: Ordering and Orientation.

Predict the four combinations before changing the page

The following comparison is derived from the documented axis rules. It assumes writing-mode: horizontal-tb, one flex line, equal order values, and source order Alpha, Beta, Gamma. “Left-to-right appearance” describes the tiles’ physical positions across the screen.

Container direction Flex direction First tile starts at Left-to-right appearance
ltr row Left Alpha, Beta, Gamma
ltr row-reverse Right Gamma, Beta, Alpha
rtl row Right Gamma, Beta, Alpha
rtl row-reverse Left Alpha, Beta, Gamma

The second and third rows can look alike when their contents are simple rectangles. Their text-direction settings differ, however. The fourth combination explains a common surprise: applying both rtl and row-reverse produces left-to-right item progression. MDN documents this direction-dependent behavior. MDN: flex-direction.

Base text direction also affects punctuation and the ordering of directional text runs. Setting rtl does not simply reverse every character in an English word. A label can remain recognizable while its punctuation appears in an unexpected position. That makes plain tiles useful for examining box placement, but insufficient for evaluating text behavior. MDN: dir usage notes.

Try a complete comparison page on your Mac

Save the following complete document as direction-demo.html using a plain-text editor, then open the file in your browser. It uses synthetic labels and CSS rectangles, with no external dependencies. The expected results follow from the documented rules; the example is not presented as a browser-tested result.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direction and flex comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 24px;
      color: #202020;
      background: #fff;
    }
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      writing-mode: horizontal-tb;
      justify-content: flex-start;
      gap: 12px;
      max-width: 448px;
      padding: 12px;
      border: 1px solid #777;
      margin-bottom: 20px;
    }
    .reverse { flex-direction: row-reverse; }
    .tile {
      flex: 0 0 64px;
      padding: 16px 0;
      text-align: center;
      background: #e2ecf4;
    }
  </style>
</head>
<body>
  <h1>Direction and flex comparison</h1>
  <p>LTR with row</p>
  <div class="row" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>LTR with row-reverse</p>
  <div class="row reverse" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row</p>
  <div class="row" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row-reverse</p>
  <div class="row reverse" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
</body>
</html>

Compare the four rows with the prediction table. All four contain the same source sequence. Only their container direction and reversal class differ. The explicit horizontal writing mode keeps this demonstration focused on the ordinary horizontal desktop case.

Next, change only justify-content: flex-start to justify-content: flex-end, save, and reload. The groups should move to their opposite main-axis edges while retaining each row’s item progression. This separates placement from reversal without introducing another text-direction setting. MDN: justify-content.

Finally, restore the alignment setting and add a period after Alpha in each row. Compare the punctuation as well as the tile positions. This is an illustrative text-direction probe, not a recommendation to assign rtl to ordinary English labels. MDN’s explanation of base direction describes why boundary punctuation deserves its own check. MDN: dir.

Diagnose unexpected results in the actual layout

Confirm that the parent is a flex container

Check the element containing the tiles. flex-direction applies when its display is flex or inline-flex. A declaration on an ordinary block container will not establish flex layout. Also check whether a later rule changes the effective value at the browser’s current width. MDN: flex-direction description.

Check inherited direction before adding another reversal

Inspect the container and its ancestors for dir, then check for CSS direction declarations. When dir is omitted, direction is generally inherited from the parent; omission does not request automatic detection. If the source sequence unexpectedly begins on the right, inherited direction may explain it. MDN: dir inheritance.

Avoid using dir="auto" as a layout switch. WHATWG defines it through content-based direction detection, principally using the first strongly directional character, and recommends reserving it for genuinely unknown text direction. A layout requirement should not depend on which label happens to appear first. HTML Standard: The dir attribute.

Separate item reversal from line reversal

If the problem appears only after narrowing the window, inspect wrapping. row-reverse changes main-axis progression; wrap-reverse changes the direction in which flex lines are stacked. The default nowrap keeps a single line and can allow overflow. These are separate controls, so test a narrow window as well as the initial desktop width. MDN: flex-wrap.

Look for individual ordering rules

Check whether any tile has an order value. Flex layout groups items by that integer, lowest first, and preserves source order within equal-valued groups. A reversal then changes the direction from which that resulting sequence is laid out. Reset unexpected item-level ordering before deciding that the container’s direction is wrong. MDN: Ordering flex items.

Check the reading sequence before keeping the change

For neutral decorative tiles, visual reversal may be the entire requirement. For links or controls, inspect the sequence in the source and follow keyboard focus through the component. Flex reversal itself does not change sequential navigation or speech order. A visually reversed group can therefore retain its original interaction sequence. W3C: Flex Flow Direction.

Use that check to decide whether the source should change. If Gamma, Beta, Alpha is the intended meaningful sequence, put the elements in that sequence. If Alpha, Beta, Gamma remains the correct reading sequence and only the presentation needs reversing, evaluate the visual arrangement with that distinction in mind. MDN demonstrates the source-order behavior with focusable links. MDN: Ordering flex items.

Choose the mechanism by the requirement: HTML dir for base text direction, flex-direction for flex-axis flow, and alignment for positioning an unchanged sequence. Before keeping the result, compare tile placement, punctuation, wrapping, and source order separately. That gives you a repeatable way to resolve a layout that merely looks reversed.

Sources