Estructura de control y diseño responsivo

Hola que tal amigos

Tengo una pagina donde los post son SVG pero no se ven el iPhone 7, entonces quisiera hacer que en una PC se viera el SVG y en celular se viera otra solo texto.

Pero no se como crear la condicionante if, para que tome el valor del CSS de si es resolucion 1024px mostrar contenido para PC y si es de 400px mostrar contenido para dispositivos moviles, con if

Este que este es el CSS responsivo de mi plantilla, uso Accesspress parallax

/*
Responsive CSS
*/
@media screen and (max-width: 1200px){

	.mid-content{
		width: 100%;
		padding: 0 10px;
		
	}

	.service-list .service-image{
		width: 16%;
		height: auto;
	}
	.service-list .service-detail{
		width: 80%;
	}

	.team-tab{
		padding: 0 50px;
	}

	.social-icons{
		display: none;
	}
}

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

	.main-navigation > ul{
		display: none;
	}
	.menu-toggle{
		display: block;
		height: 40px;
		width: 40px;
		background: url(../images/menu.png) no-repeat center #0083a9;
		text-indent: -9999px;
		cursor: pointer;
	}
	.logo-top #site-logo{
		float: left;
		text-align: left;
	}
	.logo-top .main-navigation{
		float: right;
	}

	.logo-top .menu-toggle{
		float: right;
	}
	.main-navigation{
		text-align: center;
	}
	.main-navigation > ul{
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #0083a9;
		padding: 10px 0;
		text-align: center;
	}
	.main-navigation > ul > li{
		display: inline-block;
		float: none;
	}
	.main-navigation > ul > li > a{
		color:#FFF;
	}
	.main-navigation > ul > li.current a, 
	.main-navigation li:hover > a,
	.main-navigation .current_page_item > a, 
	.main-navigation .current-menu-item > a{
		color: #CCC;
	}
	.slider-caption{
		padding-left: 70px;
		padding-right: 70px;
	}
	#main-slider{
		min-height: 0;
	}
}

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

	h1{
	font-size: 24px;
	}
	h2{
		font-size: 20px;
	}
	h3{
		font-size: 18px;
	}
	h4{
		font-size: 16px;
	}
	h5{
		font-size: 14px;
	}
	h6{
		font-size: 12px;
	}
	.parallax-section h1{
		font-size: 34px;
	}
	.slider-caption .caption-title{
		font-size: 30px;
	}
	.slider-caption .caption-description{
		font-size: 20px;
	}
	.service-list{
		width: 100%;
	}
	.portfolio-list, .portfolio-list:nth-child(4n){
		width: 32%;
		margin-right: 2%;
	}
	.portfolio-list:nth-child(3n){
		margin-right: 0;
	}
	.blog-listing .blog-list{
		width: 80%;
		margin: 0 auto 20px;
		float: none;
		display: block;
	}
	.blog-list .blog-image{
		text-align: center;
	}
	.parallax-section input[type="text"], 
	.parallax-section input[type="email"], 
	.parallax-section input[type="url"], 
	.parallax-section input[type="password"], 
	.parallax-section input[type="search"], 
	.parallax-section input[type="tel"], 
	.parallax-section textarea{
		width: 80%;
	}
	.service-listing .service-list{
		float: none;
	}
	.top-footer .top-footer-wrap{
		margin-left: 0;
	}
	.footer-block{
		width: 100% !important;
		margin-left: 0 !important;
		margin-bottom: 25px;
		float: none;
	}
	.footer-block:last-child{
		margin-bottom: 0;
	}
	.copy-right, .site-info{
		float: none;
		text-align: center;
	}
	.main-navigation > ul > li{
		display: block;
		border-bottom: 1px solid #DB5E39;
	}
	.main-navigation ul ul {
		background: #db5e39;
		position: static;
		padding:0 10px;
		font-size: 15px;
		display: none;
	}
	#primary, #secondary{
		float: none;
		width: 100%;
	}
	#main-slider .bx-wrapper .bx-controls-direction a{
		display: none;
	}
	.next-page{
		display: none;
	}
	.main-navigation ul ul a{
		color: #FFF;
	}
	.main-navigation ul ul li{
		padding: 5px 0;
	}
	.main-navigation ul ul{
		box-shadow: none;
	}
	.parallax-section{
        background-attachment: scroll !important;
        background-repeat: repeat !important;
    }
}
@media screen and (max-width: 480px){
	<? $media = 1;?>

	
	
	.parallax-section h1{
		font-size: 30px;
	}
	.service-list.odd .service-image{
		float: left;
	}
	.service-list.odd .service-detail{
		float: right;
	}
	.service-listing .service-list{
		text-align: left;
	}
	.team-big-image{
		display: none;
	}
	.team-detail{
		float: none;
		width: auto;
	}
	.team-image{
		height: auto;
	}
	.team-tab .bx-wrapper .bx-viewport{
		border-radius: 0;
	}
	.portfolio-list, .portfolio-list:nth-child(3n), .portfolio-list:nth-child(4n){
		width: 49%;
		margin-right: 2%;
	}
	.portfolio-list:nth-child(2n){
		margin-right: 0;
	}
	.blog-listing .blog-list{
		width: 100%;
	}
	.parallax-section input[type="text"], 
	.parallax-section input[type="email"], 
	.parallax-section input[type="url"], 
	.parallax-section input[type="password"], 
	.parallax-section input[type="search"], 
	.parallax-section input[type="tel"], 
	.parallax-section textarea{
		width: 100%;
	}

	.team-content{
		margin-top: 30px;
	}
	#site-logo,
	.logo-top #site-logo{
		width: 80%;
		text-align:left;
	}
	.main-navigation > ul{
		max-height:320px 
	}
	.slider-caption .caption-title{
		font-size: 25px;
	}
	.slider-caption .caption-description{
		font-size: 15px;
	}
	
}

@media screen and (max-width: 480px) and (orientation : landscape){
<? $media = 1;?>
	.main-navigation > ul{
		max-height:220px 
	}
}

@media screen and (min-width: 1001px){
	.main-navigation > ul{
		display: block !important;
	}
	.logo-top .main-navigation > ul{
		display: inline-block !important;
	}
}

Como puedo tomar el valor del CSS y luego usarlo para if

Agradezco su ayuda,
Mil gracias