Responsive İle Ufak Bir Mantık Sorusu

Şimdi aşağıdaki gibi dört faklı tasarım yaptım diyelim , Peki örnek olarak Bir bir div kodu buldum netten hazır bunu eklemek istiyorum normal bir css kodu vermiş şu şekilde

.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}

birde 480px genişlik için şöyle bir kod vermiş

@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}

bu yukarıdaki kodu nereye eklicem css yi dörde böldüm zaten ??? Zaten responsivenin mantığı burada başlıyor ama kendi sitem için kodluyorum yardımcı olabilirseniz svinirim .

@media only screen and (max-width:479px)
	{

	}


@media only screen and (min-width:480px) and (max-width:767px)
	{ 

	}


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

	}


@media only screen and (min-width:1024px)
	{

	}

@media only screen = kabaca ekran bu çözünürlükte ise çalış demektir.

eğer kodlarını direk

.col { 
margin: 1% 0 1% 0%;
}

şeklinde yazarsan ekran çözünürlüğüne bakmadan css uygular.

@media only screen and (min-width:1024px)
	{

	}

içine eklersen 1024 px den büyük çözünürlüklerde çalışır.

@media only screen and (min-width:1024px)
	{
-----------------------------------------
üst ve alt taraftaki kodlar seçicilerin hangi çözünürlükte çalışacağını belirtir.


----------------------------------------------
	}

Tamamdir cok tesekkur ederim yani bir default kodlar var digerleride coznurluge gore .. Teşekkürler

Lg G3 cihazımdan gönderildi.