Tengo una línea que describe la dirección completa de la empresa. Está hecho con diferentes piezas.

 <div><b>COMPANY</b>&nbsp;•&nbsp;Address,&nbsp;City&nbsp;•&nbsp;VAT 12345678901</div>

En una pantalla grande, el div se muestra como una línea larga:

 COMPANY • Address line, City • VAT 12345678901

Pero en un dispositivo móvil pequeño se muestra en tres líneas:

 COMPANY • Address line, City • VAT 12345678901

Mi objetivo es eliminar las balas de los dispositivos pequeños. Para lograr el objetivo, definí un elemento de span de la siguiente manera:

 .bg99 .footer-divider { content: " • "; } @media only screen and (max-width: 768px){ .bg99 div.company div { flex-direction: column; } .bg99 .footer-divider { content: "  " } }

y cambió la línea de la siguiente manera:

 <div><b>COMPANY</b><span className="footer-divider"/>Address,&nbsp;City<span className="footer-divider"/>VAT 12345678901</div>

Pero el resultado es que las balas desaparecieron en ambos dispositivos.

Al inspeccionar el navegador, veo el footer-divider la clase CSS y el contenido

 .bg99 .footer-divider { content: " • "; }

Pero las balas no son visibles en la pantalla. Parece que la regla no debería aplicarse.

¿Alguna idea?