La idea de este post es armar una web en dónde se mostrara algunos elementos, dependiendo de si la web se ve desde un celular, tablet o PC de escritorio. por ej:
- El objeto A solo se mostrará para celulares
- El objeto B solo se mostrará para tablet
- El objeto C solo se mostrará para PC

Para cumplir con lo que necesito pensaba armar 3 estrategias CSS con media query y 3 divs:
- Estrategia CSS #1: Al usar esta estrategia se ocultara el elemento en PC y Tablet
- Estrategia CSS #1: Al usar esta estrategia se ocultara el elemento en PC y Celulares
- Estrategia CSS #3: Al usar esta estrategia se ocultara el elemento en Tablet y Celular.
- Div 1 (Objeto a mostrar solo Celular): Estrategia CSS #1
- Div 2 (Objeto a mostrar solo Tablet): Estrategia CSS #2
- Div 3(Objeto a mostrar solo PC): Estrategia CSS #3

Código:
<style> 

/* Resolucion CEL = Entre 0px y 640px*/
@media screen and (max-width: 640px) {
.OcultarCelYPC{ /* Ocultar TABLET */
display: none;
}


.OcultaCelyTablet{ /* Ocultar PC */
display: none;
}
}

/* Resolucion TABLET = Entre 640px y 1280px */
@media screen and (min-width: 640px) and (max-width: 1280px) {
.OcultaPCyTablet { /* Ocultar CEL */
display: none;
}
.OcultaCelyTablet{ /* Ocultar PC */
display: none;
}
}


/* Resolucion PC = 1280px en adelante */
@media screen and (min-width: 1280px) {
.OcultarCelYPC { /* Ocultar Tablet */
display: none;
}
.OcultaPCyTablet { /* Ocultar CEL */
display: none;
}
}

</style>

<div class="OcultaPCyTablet"><p>CEL</p></div>
<div class="OcultarCelYPC"><p>TABLET</p></div>
<div class="OcultaCelyTablet"><p>PC</p></div>
 

 


Otra forma de hacerlo es setenado o inicializando las css de los elementos:
Código:
<html>
<style> 
/* Inicialmente Tablet y PC estan ocultos */
.tablet {display:none} 
.desktop {display:none}

/* Resolucion TABLET */
@media screen and (min-width: 768px){ 
.mobile { /* Se oculta MOBILE */
display:none} 

.tablet{ /* Se recupera el estado css de TABLET */
display:initial} 
}

/* Resolucion PC */
@media screen and (min-width: 1023px){ 
.tablet {  /* Se oculta TABLET */
display:none} 

.desktop{ /* Se oculta MOBILE */
display:initial} 
}

</style>

<div class="mobile"><p>MOBILE</p></div>  
<div class="desktop"><p>PC</p></div>  
<div class="tablet"><p>TABLET</p></div>  
</html>