changing display order of span - html

Question

I'm helping a friend writing some articles for scientific magazines. Some publishers require the authors cited in the bibliography in the form "last name, first name", while others asked for "first name, last name" (of course with a list ordered by last name, and sometimes with the last name in small caps).
I know this would be better done with a database, but my friend's skills are not at that level.
If I write a very simple HTML page, using lines like this one
<p><span class="lname">Doe</span>, <span class="fname">John</span></p>
is there a CSS way to have the line shown as "John DOE" or must I use some JS?

Answer 1

You can do this with flexbox, using order (with a little adjustment).
The Code (https://jsfiddle.net/sebastianbrosch/7Lqr68ar/):
p {
display:flex;
}
.fname {
order:1;
}
.lname {
order:2;
}
.fname:after {
content:",\00a0";
}
<p>
<span class="lname">Doe</span>
<span class="fname">John</span>
</p>
You can use a more dynamic solution like this too:
#name {
display: flex;
}
#name.fl .firstname:after {
content: "\00a0";
}
#name.lf .lastname:after {
content: ",\00a0";
}
#name.fl .firstname,
#name.lf .lastname {
order: 1;
}
#name.fl .lastname,
#name.lf .firstname {
order: 2;
}
<p class="fl" id="name">
<span class="firstname">John</span><span class="lastname">Doe</span>
</p>
<p class="lf" id="name">
<span class="firstname">John</span><span class="lastname">Doe</span>
</p>
Hint: You can use this solution but it would be better to prepare the name with PHP or get the name in the right format from database. Setting the order is only setting the visual ordering but not the ordering on code or for screenreaders.

Answer 2

You could use float and hide the comma.
.fname {float: left; padding-right: 5px;}
.comma {display: none;}
<p><span class="lname">Doe</span><span class="comma">,</span> <span class="fname">John</span></p>

Answer 3

Here's a different approach using data-attributes and :before and :after
Assuming your author list is in a container that I've called .autherContainer that either has the additional class .lnLast or .lnFirst. And the author names are written as shown, with the last name written twice for each version
HTML:
<div class="authorContainer lnFirst">
<p data-ln-first="Doe, " data-ln-last=" DOE">John</p>
</div>
<div class="authorContainer lnLast">
<p data-ln-first="Dear, " data-ln-last=" DEAR">Jane</p>
</div>
CSS
.authorContainer.lnFirst p:before {
content: attr(data-ln-first);
}
.authorContainer.lnLast p:after {
content: attr(data-ln-last);
}
I made my assumptions based on the fact that if the lists were all in the same container then you could simply write them in the order they ought to be instead of following a format and adding superfluous code, but that's just me and others might disagree