Responsive text and character removal when on mobile - html

Question

I'm absolutely no HTML/CSS expert, so I beg your pardon if this may sound too basic.
I have an ordered list.
The list is made this way (a name, a dash, a string with a title, a string with some other data, within brackets):
1. John Doe - Balloon last position (other data)
2. Foo Bar - Metallic balloon from out of nowhere (other data)
...
and so on.
Now, to manage responsivity (mobile), I want the following:
the number and the name must be on the same line;
the dash must disappear when on mobile;
the title must be displayed on a second line;
(other data) must be displayed on a third line;
So, I did the following.
In HTML:
<ol>
<li class="myclass">
<span class="name">John Doe – </span>
<span class="title"> Balloon last position</span>
<span class="otherdata">(Canada)</span>
</li>
...
</ol>
and found that basically the three lines idea works with this CSS code:
li.myclass {
display: list-item;
flex-direction: row;
}
#media (max-width: 760px) {
li.myclass {
display: list-item;
}
.name, .title, .otherdata {
display: block;
width: 100%;
}
}
Now, first of all, I don't know if what I did to achieve the result is correct or there's a better way. But at this point I don't know how to eliminate the dash when the list is displayed on mobile. I red about the CSS content property but I failed to understand how to use it in this scenario.
Any help is appreciated, thanks in advance.

Answer 1

I would wrap all the span elements in a div (to keep the ordered list numbering visible. If you use display flex on a list item you will lose some of the list properties) and also put the dash in it's own span and then just hide it on mobile
#media (max-width: 760px) {
li div {
display: flex;
flex-direction: column
}
.dash {
display: none
}
}
<ol>
<li class="myclass">
<div>
<span class="name">John Doe</span>
<span class="dash"> - </span>
<span class="title"> Balloon last position</span>
<span class="otherdata">(Canada)</span>
</div>
</li>
</ol>