CSS перезаказа двух встроенных элементов

Question

Эй, ребята у меня есть следующий код

<span>Foo</span><span>blah</span> 

Как я могу поменять положение Foo и бла. Я попытался поместить Foo с поплавком вправо, но он отправляет его в крайнее правое положение, пока я просто хочу, чтобы он был справа от бла.

Благодаря

Answer 1

<span>Foo</span><span style="float:left">blah</span> 

Answer 2

span:last-child { 
 
    float: left; 
 
}

<span>Foo</span><span>blah</span>

Конечно, это работает только в этом узком прецеденте, где эти элементы находятся в начале строки только элементы.

Answer 3

Плавающий приведет к тому, что элементы <span> станут блочными элементами. Если это не ваше намерение, вы можете использовать свойство inline-flex (see browser support):

p { 
 
    display: inline-flex; 
 
} 
 
p span:first-child { 
 
    order: 2; 
 
}

<p><span>Foo</span><span>blah</span></p>