Скрытие контента при смене расширения - Joomla 3.x: Шаблоны, разметка и макеты вывода

.visiblephone{@media all and not (handheld) { display:none;}}

<h4>Виден на...</h4>
<p>Зеленая отметка означает что блок виден в текущем окне шаблона.</p>
<ul class="responsive-utilities-test">
<li>Телефон<span class="visible-phone">&#10004; Телефон</span></li>
<li>Планшет<span class="visible-tablet">&#10004; Планшет</span></li>
<li>Монитор<span class="visible-desktop">&#10004; Монитор</span></li>
</ul>
<h4>Скрыт на...</h4>
<p>Здесь зеленая отметка блока означает что он скрыт в текущем окне шаблона.</p>
<ul class="responsive-utilities-test hidden-on">
<li>Телефон<span class="hidden-phone">&#10004; Телефон</span></li>
<li>Планшет<span class="hidden-tablet">&#10004; Планшет</span></li>
<li>Монитор<span class="hidden-desktop">&#10004; Монитор</span></li>
</ul>

@media all and not handheld {.visiblephone{display:none;}}
@media handheld {.visiblephone{display:block;}}

<div class="news-item">
	<h4>Учимся основам респонсивной вёрстки</h4>
	<span class="date">12 марта 1991 года</span>
	<img src="" />
	<p>CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. <span class="more">Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.</span></p>
	<a href="#">Показать целиком</a>
</div>

@media screen and (max-width: 1880px) { /*на больших экранах*/
	.news-item {width:600px;} /*ширина всего блока*/
	.news-item p {font-size:14px; line-height:20px} /*основной шрифт*/
	.news-item р4 {font-size:20px; line-height:24px} /*шрифт заголовка*/
	.news-item img {width:100%;} /*картинка на всю ширину*/
	.news-item a {display:none;} /*прячем ссылку, т.к. текст целиком выведен*/
}


@media screen and (max-width: 770px) { /*на маленьких экранах*/
	.news-item {width:200px;}
	.news-item p {font-size:10px; line-height:14px} /*уменьшаем*/
	.news-item р4 {font-size:14px; line-height:20px} /*уменьшаем*/
	.news-item img {display:none} /*прячем*/
	.news-item a {display:inline-block;} /*показываем*/
	.news-item .readmore {display:inline-block;} /*прячем часть текста*/
}

@media screen and (min-width: 770px)

	.news-item {width:600px;} /*ширина всего блока*/
	.news-item p {font-size:14px; line-height:20px} /*основной шрифт*/
	.news-item р4 {font-size:20px; line-height:24px} /*шрифт заголовка*/
	.news-item img {width:100%;} /*картинка на всю ширину*/
	.news-item a {display:none;} /*прячем ссылку, т.к. текст целиком выведен*/

 
 
@media screen and (max-width: 770px) { /*на маленьких экранах*/
	.news-item {width:200px;}
	.news-item p {font-size:10px; line-height:14px} /*уменьшаем*/
	.news-item р4 {font-size:14px; line-height:20px} /*уменьшаем*/
	.news-item img {display:none} /*прячем*/
	.news-item a {display:inline-block;} /*показываем*/
	.news-item .readmore {display:inline-block;} /*прячем часть текста*/
}