JQuery - Carrusel de imágenes.

Hola compañeros, a ver si podéis echarme un cablecillo.
Actualmente estoy haciendo una página Web en la que en su parte central tiene un carrusel de imágenes de bootstrap (slideshow). Cada una de las imágenes que he incluido en dicho carrusel lleva un texto explicativo relacionado con la fotografía que se muestra en ese momento. Por razones de espacio, lo he programado de forma que al mostrarse la página en dispositivos pequeños no se muestre ese texto con las clases (hidden-xs y hidden-sm), y la idea que tenia en un primer momento, era mostrar el texto en un contenedor div aparte (pero en la misma pagina) en dispositivos con esos tamaños de pantalla. He intentado hacerlo con un script de jQuery y con jQuery con ajax, pero dado con soy súper novato en dichos Frameworks (tengo nociones muy básicas), no he obtenido los resultados deseados, y por esos recurro a vosotros que tengo entendido que sois unos eruditos en este tema. Os estaría muy agradecido si me pudierais ayudar porque en estos momentos me encuentro en un punto muerto y si las posibles respuestas me explicaran paso por paso el código que me propongáis para resolver el problema, ya que mi objetivo principal al solicitar ayuda en este foro es, además de darle una solución a la cuestión, es la de aprender todo lo posible, ya que me encanta el mundo de la programación y desearía en un futuro dedicarme a ello profesionalmente.
Este es la sección de código donde tengo el carrusel de imágenes que menciono:
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/carousel1.jpg" alt="First photo of the carousel." class="image img-responsive"/>
<div class="carousel-caption hidden-xs hidden-sm">
/*Estos son los títulos y los párrafo que quiero que se muestren en el div de más abajo que
irán alternándose al cambiar la imagen del carrusel.*/
<span>Titulo 1.</span><br/>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="item active">
<img src="img/carousel2.jpg" alt="First photo of the carousel." class="image img-responsive"/>
<div class="carousel-caption hidden-xs hidden-sm">
<span>Titulo 2.</span><br/>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="item active">
<img src="img/carousel3.jpg" alt="First photo of the carousel." class="image img-responsive"/>
<div class="carousel-caption hidden-xs hidden-sm">
<span>Titulo 3.</span><br/>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
<div id="destino" class="visible-xs visible-sm">
/*En este contenedor es donde quiero que se muestren los títulos y los párrafos que
acompañan a las imágenes del carrusel en tiempo real.
Este contenedor solo es visible en dispositivos con pantallas de tamaño xs y sm.*/
</div>
</div>
</div>
Agradeciendo de antemano vuestro interes, os saluda atentamente:
Miguel Ángel Fernández.