Responsive text and character removal when on mobile

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.

>Solution :

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>