Как указать размеры сетки для конкретного селектора?

Question

[freeman0204]

Есть своя сетка:

.container .cols.col-1 {width: 8.33333333333%;}
.container .cols.col-2 {width: 16.666666667%;}
.container .cols.col-3 {width: 25%;}
.container .cols.col-4 {width: 33.333333333%;}
.container .cols.col-5 {width: 41.666666667%;}
.container .cols.col-6 {width: 50%;}
.container .cols.col-7 {width: 58.333333333%;}
.container .cols.col-8 {width: 66.666666667%;}
.container .cols.col-9 {width: 75%;}
.container .cols.col-10 {width: 83.333333333%;}
.container .cols.col-11 {width: 91.666666667%;}
.container .cols.col-12 {width: 100%;}

Указал такие стили для ширины меньше 650px. Но они применяются для всего сайта.

@media screen and (max-width: 650px) {
	.container {
	width: 95%;
}	
	.container .cols.col-1,
	.container .cols.col-2,
	.container .cols.col-3,
	.container .cols.col-4,
	.container .cols.col-5,
	.container .cols.col-6,
	.container .cols.col-7,
	.container .cols.col-8,
	.container .cols.col-9,
	.container .cols.col-10,
	.container .cols.col-11,
	.container .cols.col-12 {width: 100%;}
	}

<footer class="wrapper-footer">
		<div class="container">
			<div class="row">
				<div class="cols col-4">
					<h4>Recent Posts</h4>
						<ul class="footer-column-left">
							<li><a href="">Wedding Photos that Will Blow Your Mind Away.</a></li>
							<li><a href="">Intent WordPress Theme Features are Amazing.</a></li>
							<li><a href="">A New Era of Design is Here</a></li>
							<li><a href="">Creativio WordPress Theme nowAvailable for Sale.</a></li>
						</ul>
				</div>
				<div class="cols col-4">
					<h4>About intent</h4>
						<p class="footer-column-center">Lorem ipsum dolor sit amet, at mea eius corpora, at eam munere facilisi omittantur. Nemore accusam usu no, ei nec vidit commune constituto. Te usu inani volumus, eum albucius menandri at, sed apeirian percipitur ad.
<span>Id vitae regione has. In tollit dicant vim. His ex detracto percipitur, id vis nibh quas illum. Delicata dissentiet ius ne, latine euripidis quaerendum et vis.</span></p>
				</div>
				<div class="cols col-4 footer-column-right">
					<h4>Social Media</h4>
					<div class="sprites">
							<a class="sprite sprite-behance"></a>
							<a class="sprite sprite-blogger"></a>
							<a class="sprite sprite-digg"></a>
							<a class="sprite sprite-dribbble"></a>
							<a class="sprite sprite-email"></a>
							<a class="sprite sprite-evernote"></a>
							<a class="sprite sprite-facebook"></a>
							<a class="sprite sprite-flickr"></a>
							<a class="sprite sprite-google-"></a>
							<a class="sprite sprite-linkedin"></a>
							<a class="sprite sprite-path"></a>
							<a class="sprite sprite-picasa"></a>
							<a class="sprite sprite-reddit"></a>
							<a class="sprite sprite-rss"></a>
							<a class="sprite sprite-skype"></a>
							<a class="sprite sprite-stumble-upon"></a>
							<a class="sprite sprite-tumblr"></a>
							<a class="sprite sprite-twitter"></a>
							<a class="sprite sprite-vimeo"></a>
							<a class="sprite sprite-zerply"></a>
					</div>
				</div>
			</div>
		</div>
	</footer>

Как прописать для wrapper-footer и заменить cols col-4 на cols col-12?