3 column responsive

by Emmanuel Garcia

HTML

<div id="pagewrap">
	<div id="columnas" class="wrapper grid3">
	
		<article class="col">
			 <a href="raintree-getaway.html" target="_self" style="text-decoration: none"><img src="http://rvcmembers.com/Emmanuel_test/responsiveTR/images/activities.jpg" alt="Raintree Getaways"  ></img>
		<div class="tittle_travel_deals" >Raintree Getaways</div>
	<div class="description_travel_deals" >Looking to save on your next vacation? We offer great deals on stays at many of our resorts throughout North America. Click here. to find out where your next adventure will be.</div></a>
		</article>
	
		<article class="col">
			 <a href="all_inclusive.html" target="_self" title="Xplora Cancun" style="text-decoration: none"><img src="http://rvcmembers.com/Emmanuel_test/responsiveTR/images/all_inclusive.jpg" alt="All Inclusive" width="350" ></img>
		<div class="tittle_travel_deals">All Inclusive Vacations</div>
	<div class="description_travel_deals">One Stay. One Price. Experience all-inclusive vacationing with Travel Raintree. Our allinclusive programs enable you to get the most out of your time with us. Find out how here.</div></a>
		</article>
	
		<article class="col">
			 <a href="http://www.xploracancun.com" target="_blank" style="text-decoration: none"><img src="http://rvcmembers.com/Emmanuel_test/responsiveTR/images/xplora.jpg" alt="Xplora Cancun" width="350" ></img>
		<div class="tittle_travel_deals">Discover Cancun with Xplora</div>
	<div class="description_travel_deals">Cancun is a land full of history and adventure, and there’s no better way to experience it than with Xplora Cancun. Click here to browse a vast selection of tours and book before you even arrive in Cancun.</div></a>
		</article>
</div></div>

CSS

#columnas img {
    max-width:100%;
}
.tittle_travel_deals{
    text-align:justify;
    margin: 10px 10px;
}
.description_travel_deals{
    text-align:justify;
    margin: 10px 10px 10px;
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
    
}

#pagewrap {
	width: 1100px;
	max-width: 96%;
	margin: 0 auto;
}
.wrapper {
	overflow: hidden;
}

/************************************************************************************
COLUMN
*************************************************************************************/
.col {
	background: #eee;
	float: left;
	margin-left: 3.2%;
	margin-bottom: 30px;
}
.fullwidth .col {
	float: none;
	margin-left: 0;
}
/* grid4 col */
.grid4 .col {
	width: 22.6%;
}
/* grid3 col */
.grid3 .col {
	width: 31.2%;
}
/* grid2 col */
.grid2 .col {
	width: 48.4%;
}
/* clear col */
.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
	margin-left: 0;
	clear: left;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* reset cols to 3-column */
@media screen and (max-width: 1100px) {
	/* grid4 */
	.grid4 .col {
		width: 31.2%;
	}
	.grid4 .col:nth-of-type(4n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 0;
		clear: left;
	}
}

/* reset cols to 2-column */
@media screen and (max-width: 600px) {
	/* grid4 */
	.grid4 .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* grid3 */
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
}

/* reset cols to fullwidth */
@media screen and (max-width:...