HTML ; afficher ou masquer du contenu sur mobile

Bonjour,

Je suis propriétaire d'un site internet hébergé sur Tumblr.
Le CMS de Tumblr me permet d'ajouter des pages codées en HTML.
J'aimerais utiliser ce code CSS, afin d'optimiser l'affichage de mon site sur mobile ;

//medium+ screen sizes
@media (min-width:992px) {
.desktop-only {
display:block !important;
}
}

//small screen sizes
@media (max-width: 991px) {
.mobile-only {
display:block !important;
}

.desktop-only {
display:none !important;
}
}

Actuellement j'ai essayé de mettre ce code entre ces balises dîtes-moi si elles sont correcte ;

<style type="text/css">
<!--
Mon code CSS
-->
</style>

J'aimerais savoir à quel emplacement je dois écrire le contenu de ma page dans ce code afin qu'un bloc texte par exemple, ne s'affiche que sur navigateur mobile, et qu'un autre bloc texte ne s'affiche jamais sur navigateur mobile.

Merci