No se si te he entendido pero... ¿Has probado utilizando media queries? Declaras que cuando el dispositivo sea de entre X y X tamaño de ancho se cargue unos estilos CSS u otros.
te dejo un ejemplo, lo descargas y redimensionas tu navegador, verás como se modifica según el ancho del dispositivo.
En dispositivos grandes:
En dispositivos pequeños:
Y aquí el código (crea un archivo HTML, lo pegas y redimensionas el navegador para ver los cambios):
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Cosas sosas</title>
<style>
@media screen and (min-width:1200px) {
.wrapper {
width: 400px;
height: 110px;
background-color: #297F7B;
overflow: hidden;
}
.img {
width: 100px;
padding: 5px;
float: left;
}
.texto {
width: 270px;
padding: 5px;
float: left;
}
}
@media screen and (max-width:767px) {
.wrapper {
background-color: #297F7B;
}
.img {
padding-top: 16px;
}
.img>img{
display: block;
margin: auto;
}
.texto {
padding-bottom: 8px;
}
.texto>p {
text-align: center;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="img">
<img src="http://placehold.it/100x100" alt="Foto vídeo">
</div>
<div class="texto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolor dolores id neque eaque dicta.</p>
</div>
</div>
</body>
</html>