Responsive abstractions

responsive-media-basic.css

.media,
.med3 {
	display:block;
}
.media-img,
.med3-img{
	float:left;
	margin-right:1em;
}

/* Reversed image location (right instead of left). */
.media-img-rev,
.med3-img-rev{
	float:right;
	margin-left:1em;
}
.media-img-rev img,
.media-img img,
.med3-img img,
.med3-img-rev img {
	display:block;
}
.media-body,
.med3-body{
	overflow:hidden;
}
.media-body > :last-child,
.med3-body > :last-child {
	margin-bottom:0;
}

@media only screen and (min-width: 768px) {
	.med3 {
		display:inherit;
	}
	.med3-img{
		float:none;
		margin-right:inherit;
	}

	/* Reversed image location (right instead of left). */
	.med3-img-rev{
		float:none;
		margin-left:inherit;
	}
	.med3-img img,
	.med3-img-rev img {
		display:inherit;
	}
	.med3-body{
		overflow:inherit;
	}
	.med3-body > :last-child {
		margin-bottom:inherit;
	}

}


@media only screen and (min-width: 768px) and (max-width: 959px) {


	.med7 {
		display:block;
	}
	.med7-img{
		float:left;
		margin-right:1em;
	}

	/* Reversed image location (right instead of left). */
	.med7-img-rev{
		float:right;
		margin-left:1em;
	}
	.med7-img img,
	.med7-img-rev img {
		display:block;
	}
	.med7-body{
		overflow:hidden;
	}
	.med7-body > :last-child {
		margin-bottom:0;
	}

}


@media only screen and (min-width: 960px) {
	.med9 {
		display:block;
	}
	.med9-img{
		float:left;
		margin-right:1em;
	}

	/* Reversed image location (right instead of left). */
	.med9-img-rev{
		float:right;
		margin-left:1em;
	}
	.med9-img img,
	.med9-img-rev img {
		display:block;
	}
	.med9-body{
		overflow:hidden;
	}
	.med9-body > :last-child {
		margin-bottom:0;
	}
}

responsive-media-with-nots.css

/*
Similar to above but with NOT alternatives, making class="medn7" equivalent to class="med3 med9"

I suspect it's a bit too much & unsure how useful it would be.
*/
.media,
.med3,
.medn7,.medn9 {
	display:block;
}
.media-img,
.med3-img,
.medn7-img,
.medn9-img {
	float:left;
	margin-right:1em;
}

/* Reversed image location (right instead of left). */
.media-img-rev,
.med3-img-rev,
.medn7-img-rev,
.medn9-img-rev {
	float:right;
	margin-left:1em;
}
.media-img-rev img,
.media-img img,
.med3-img img,
.med3-img-rev img,
.medn7-img img,
.medn7-img-rev img,
.medn9-img img,
.medn9-img-rev img {
	display:block;
}
.media-body,
.med3-body,
.medn7-body,
.medn9-body {
	overflow:hidden;
}
.media-body > :last-child,
.med3-body > :last-child,
.medn7-body > :last-child,
.medn9-body > :last-child {
	margin-bottom:0;
}

@media only screen and (min-width: 768px) {
	.med3 {
		display:inherit;
	}
	.med3-img{
		float:none;
		margin-right:inherit;
	}

	/* Reversed image location (right instead of left). */
	.med3-img-rev{
		float:none;
		margin-left:inherit;
	}
	.med3-img img,
	.med3-img-rev img {
		display:inherit;
	}
	.med3-body{
		overflow:inherit;
	}
	.med3-body > :last-child {
		margin-bottom:inherit;
	}

}


@media only screen and (min-width: 768px) and (max-width: 959px) {


	.med7,
	.medn3,
	.medn9 {
		display:block;
	}
	.med7-img,
	.medn3-img,
	.medn9-img {
		float:left;
		margin-right:1em;
	}

	/* Reversed image location (right instead of left). */
	.med7-img-rev,
	.medn3-img-rev,
	.medn9-img-rev {
		float:right;
		margin-left:1em;
	}
	.med7-img img,
	.med7-img-rev img,
	.medn3-img img,
	.medn3-img-rev img,
	.medn9-img img,
	.medn9-img-rev img {
		display:block;
	}
	.med7-body,
	.medn3-body,
	.medn9-body {
		overflow:hidden;
	}
	.med7-body > :last-child,
	.medn3-body > :last-child,
	.medn9-body > :last-child {
		margin-bottom:0;
	}

}


@media only screen and (min-width: 960px) {
	.med9,
	.medn3,
	.medn7 {
		display:block;
	}
	.med9-img,
	.medn3-img,
	.medn7-img {
		float:left;
		margin-right:1em;
	}

	/* Reversed image location (right instead of left). */
	.med9-img-rev,
	.medn3-img-rev,
	.medn7-img-rev {
		float:right;
		margin-left:1em;
	}
	.med9-img img,
	.med9-img-rev img,
	.medn3-img img,
	.medn3-img-rev img,
	.medn7-img img,
	.medn7-img-rev img {
		display:block;
	}
	.med9-body,
	.medn3-body,
	.medn7-body {
		overflow:hidden;
	}
	.med9-body > :last-child,
	.medn3-body > :last-child,
	.medn7-body > :last-child {
		margin-bottom:0;
	}
}