Galeria responsive

[gerardrev]

Hola compañeros, estoy haciendo una pequeña web con Bootstrap.
El problema lo tengo con una pequeña galeria de imagenes que necesito.
Necesito una fila de 3 imagenes, con sus 3 pies de foto, y que al cambiar el tamaño de la pantalla, estas 3 imagenes puedan separarse y en la resolucion XS queden una encima de otra, mientras que en LG, MD, y SM queden todas en paralelo.

Para ello he probado dos cosas, la primera declararlo como figure cada imagen y figurecaption para el pie de foto, pero si lo hago así me las muestra siempre una encima de otra, porque le da 100% del ancho de la pantalla.

Tambien he probado de hacer una tabla de 2 filas y 3 columnas, pero claro la tabla es estatica, no cambia de forma al ajustar la pantalla a XS, y si declaro la tabla como responsive entonces pone un scroll horizontal a la tabla.

Alguna sugerencia?
Gracias de antemano

Código HTML:

<h2>Ingletados</h2>
<figure><a id="zoom" title="Ingletado 2 piezas" href="img/cajones/ingletados/3p.jpg"> <img src="img/cajones/ingletados/3p.jpg" alt="" /> <span class="zoom"></span> </a>
             <figcaption class="name" style="padding: 0px"><p>Ingletado 2 piezas</p></figcaption>
            </figure>
            <figure><a id="zoom" title="Ingletado 3 piezas" href="img/cajones/ingletados/3p.jpg"> <img src="img/cajones/ingletados/3p.jpg" alt="" /> <span class="zoom"></span> </a>
             <figcaption class="name" style="padding: 0px"><p>Ingletado 3 piezas</p></figcaption>
            </figure>
            <figure><a id="zoom" title="Ingletado 4 piezas" href="img/cajones/ingletados/4p.jpg"> <img src="img/cajones/ingletados/4p.jpg" alt="" /> <span class="zoom"></span> </a>
             <figcaption class="name" style="padding: 0px"><p>Ingletado 4 piezas</p></figcaption>
            </figure>
 

[alpe2000]

Esto hace que en XS cada div ocupe el total de la fila y en el resto un tercio.
¿es eso lo que necesitas?

Código HTML:

<div class="col-xs-12 col-md-4"></div>
 

[gerardrev]

Iniciado por alpe2000

Esto hace que en XS cada div ocupe el total de la fila y en el resto un tercio.
¿es eso lo que necesitas?

Código HTML:

<div class="col-xs-12 col-md-4"></div>
 

No, el problema lo tengo en como estructurar las imagenes, no con el "col".

[alpe2000]

Yo no entiendo lo que quieres hacer, pero...

Código HTML:

<div class="container-fluid">
          <div class="row">
            <div class="col-xs-12 col-md-4">
                <img class="img-responsive" src="">
            </div>
            <div class="col-xs-12 col-md-4">
                <img class="img-responsive" src="">
            </div>
            <div class="col-xs-12 col-md-4">
                <img class="img-responsive" src="">
            </div>
          </div>
        </div>
 

esto hace que cada fila tenga tres imagenes en cualquier caso que no sea XS, en XS salen de una en una

[gerardrev]

Iniciado por alpe2000

Yo no entiendo lo que quieres hacer, pero...

Código HTML:

<div class="container-fluid">
          <div class="row">
            <div class="col-xs-12 col-md-4">
                <img class="img-responsive" src="">
            </div>
            <div class="col-xs-12 col-md-4">
                <img class="img-responsive" src="">
            </div>
            <div class="col-xs-12 col-md-4">
                <img class="img-responsive" src="">
            </div>
          </div>
        </div>
 

esto hace que cada fila tenga tres imagenes en cualquier caso que no sea XS, en XS salen de una en una

Perfecto, justo lo que queria/necesitaba, muchas gracias!