One more example of responsive design

Here I already gave one example of responsive table. Now I needed to display thumbnails on the right side for bigger screens (desktops) and for smaller screens (mobiles) to display them under the map. So here is my example:

@media only screen and (max-width: 480px),
(min-device-width: 768px) and (max-device-width: 1024px) {
	#map-canvas {
		position: relative;
		width: 100%; 
		height: 50%; 
		float: left;
	}

	#thumbnails {
		width: 100%; 
		height: 50%; 
		float: left; 
		overflow: auto;
	}
}

@media only screen and 
(min-device-width: 768px)  {
	#map-canvas {
		position: relative;
		width: 50%; 
		height: 100%; 
		float: left;
	}

	#thumbnails {
		width: 50%; 
		height: 100%; 
		float: left; 
		overflow: auto;
	}	
}