LEGRID, Пример работы

<div class="container">
	<div class="content">
		<div class="col col-mb-12">
			<h3>Показ/скрытие блоков</h3>
		</div>
	</div>

<div class="col col-mb-12 col-3 col-margin-bottom">
			<div class="demo">
				<span class="col-mb-hide">
					Этот текст скроется на мобильном
				</span>
			</div>
		</div>
		<div class="col col-mb-12 col-3 col-margin-bottom">
			<div class="demo">
				<span class="col-hide">
					Этот текст скроется на планшете
				</span>
			</div>
		</div>
		<div class="col col-mb-12 col-3 col-margin-bottom">
			<div class="demo">
				<span class="col-dt-hide">
					Этот текст скроется на десктопе
				</span>
			</div>
		</div>
		<div class="col col-mb-12 col-3 col-margin-bottom">
			<div class="demo">
				<span class="col-ld-hide">
					Этот текст скроется на большом десктопе
				</span>
			</div>
		</div>
	</div>

<div class="col col-mb-12 col-3 col-margin-bottom">
			<div class="demo">
				<span class="col-mb-block">
					Этот текст отобразится на мобильном
				</span>
			</div>
		</div>
		<div class="col col-mb-12 col-3 col-margin-bottom">
			<div class="demo">
				<span class="col-block">
					Этот текст отобразится на планшете
				</span>
			</div>
		</div>
		<div class="col col-mb-12 col-3 col-margin-bottom">
			<div class="demo">
				<span class="col-dt-block">
					Этот текст отобразится на десктопе
				</span>
			</div>
		</div>
		<div class="col col-mb-12 col-3 col-margin-bottom">
			<div class="demo">
				<span class="col-ld-block">
					Этот текст отобразится на большом десктопе
				</span>
			</div>
		</div>
	</div>

<div class="content">
		<div class="col col-mb-12">
			<h3>Отступы</h3>
		</div>
	</div>
	<div class="content col-mb-middle">
		<div class="col col-mb-12 col-4 col-margin-bottom">
			<div class="demo"><div class="d-ib demo-helper col-padding-top"><code>.col-padding-top</code></div></div>
		</div>
		<div class="col col-mb-12 col-4 col-margin-bottom">
			<div class="demo"><div class="d-ib demo-helper col-padding"><code>.col-padding</code></div></div>
		</div>
		<div class="col col-mb-12 col-4 col-margin-bottom">
			<div class="demo"><div class="d-ib demo-helper col-padding-bottom"><code>.col-padding-bottom</code></div></div>
		</div>
	</div>
	<div class="content col-mb-middle">
		<div class="col col-mb-12 col-4 col-margin-bottom">
			<div class="demo"><div class="d-ib demo-helper col-margin-top"><code>.col-margin-top</code></div></div>
		</div>
		<div class="col col-mb-12 col-4 col-margin-bottom">
			<div class="demo"><div class="d-ib demo-helper col-margin"><code>.col-margin</code></div></div>
		</div>
		<div class="col col-mb-12 col-4 col-margin-bottom">
			<div class="demo"><div class="d-ib demo-helper col-margin-bottom"><code>.col-margin-bottom</code></div></div>
		</div>
	</div>

</div>

Копировать код примера

Открыть пример в новом окне