Zmiana treści w zależności od rozdzielczości Wordpress

Hej, mam stronę opartą na wordpressie, dokładniej na szablonie Sydney. Na stronie głównej pod slajderem znajduje się grafika, koło korzyści z informacjami, czym zajmuje się firma. Treść na grafice jest nieczytelna na urządzeniach mobilnych, dlatego dla małych ekranów chciałbym zastąpić ją tekstem.
W tym celu w arkuszu styli stworzyłem 2 klasy large-screen i small screen, mające na celu ukrywać treści tekst na dużym ekranie i grafikę na małym.

	@media (max-width: 992px;){
		.large-screen{
			display:none;
		}
	}

	@media (min-width: 992px;){
		.small-screen{
			display:none;
		}
	}

Natomiast na stronie wyświetlanej na stronie głównej zastosowałem je w ten sposób:

<div class="large-screen"><img class="aligncenter" src="image" /></div>
<div class="small-screen"><p class="small-screen">tekst</p></div>

Niestety, nie działają one prawidłowo i wyświetlony jest zarówno tekst jak i grafika w każdej rozdzielczości. W jaki sposób można to prawidłowo rozwiązać?

Wewnątrz media masz ;

Zimny orzeł napisał(a):

Wewnątrz media masz ;

Faktycznie, wcześniej tego nie widziałem. Usunąłem średniki, ale nadal bez zmian.

Mi tu działa
https://jsfiddle.net/q69cnu0p/

spróbuj zamienić class na id ma wyższy priorytet

Dziękuję, to rozwiązało problem :).