Как заказать строчные элементы в режиме RTL?

Просто используйте flex-direction: row-reverse

.content
{
	width: 200px;
}
.content.rtl
{
	display:flex;
  -webkit-flex-direction: row-reverse; 
  flex-direction: row-reverse;
}

<h5 class = "content">
	<span>3</span>
	<span>h</span>
	&nbsp;
	<span>45</span>
	<span>min</span>
</h5>
<h5 class = "content rtl">
	<span>3</span>
	<span>h</span>
	&nbsp;
	<span>45</span>
	<span>min</span>
</h5>
 Run code snippetCopy snippet to answerExpand snippet

использовать направление изгиба

dir влияет на диапазон, но диапазон не будет выровнен по правому краю, как вы ожидаете, только его содержимое.

Вы увидите эффект для span, если закончите его точкой - точка будет размещена слева, а не справа.

Div - это элемент display:block, то есть он заполняет всю ширину, поэтому текст в нем можно выровнять. Span - это display:inline, поэтому он находится в тексте, как буква (упрощенно).

(кстати - считается недопустимым иметь элемент блока внутри встроенного элемента)

Test right to left, div and span: <br />
<span>(span)  Hello World!</span> <br />
<span dir='rtl'>(span rtl)  Hello World!</span>
<div>(div) Hello World!</div>
<div dir='rtl'>(div rtl) Hello World!</div>

Просто добавьте display: inline-block к промежуткам

.content {
  width: 200px;
  border: solid 1px black;
}

.content.rtl {
  direction: rtl;
  text-align: right;
}

span {
  display: inline-block;
}

<h5 class = "content">
  <span>3</span>
  <span>h</span> &nbsp;
  <span>45</span>
  <span>min</span>
</h5>
<h5 class = "content rtl">
  <span>3</span>
  <span>h</span> &nbsp;
  <span>45</span>
  <span>min</span>
</h5>