Add text under images using table

Question

I’m using a table to align images and text. However, when the resolution is low, it gets very unpleasant and I wanted to put the text down in low resolutions. How to do this, being within a table?

Code:

<table>
    <tr>
    </tr>
    <tr style="display: inline;">
        <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none;  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;width:150px"></td>
        <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none;  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;display: block;" width="150px"></td>
        <td><h3 style="padding-left: 2%">Stone Of The Month</h3></td>
        <tr style="display: inline;">
            <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none;box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;display: block;" width="150px"></td>
            <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none; box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;display: block;" width="150px"></td>
            <td><h5 style="padding-left: 2%">Lorem ipsum dolor sit amet, sint mutat maiorum usu an, vim te alia movet labores, in oratio civibus nam. Audire adipisci eos at, ad dicant deserunt deterruisset vim. An nec melius verterem, vel ex electram honestatis. Eam erant primis id, usu ex fugit elitr.</h5></td>
        </tr>
    </tr>
</table>

Imagery:http://i.imgur.com/E75y3wd.png

How would you put down, even if it’s on a table ?

Answer 1

<div class="col-md-12">
  <div class="col-md-3">
    <img src="imagem.jpg">
    <br/>
    <span>exemplo de texto</span>
  </div>
  <div class="col-md-3">
    <img src="outraImagem.jpg">
    <br/>
    <span>exemplo de texto</span>
  </div>
</div>

http://www.bootply.com/NEMECLieqQ

A short example about an alignment on a text below the image. It can be mounted in several ways.

If the text gets to be very large, I recommend that you do this.

<div class="col-md-12">
      <div class="col-md-2 col-sm-1">
        <img src="imagem.jpg">
        <br>
        <span class="">exemplo de texto grande independente do número de caracteres, sempre permanecerá alinhado a imagem</span>
      </div>
      <div class="col-md-2 col-sm-1">
        <img src="outraImagem.jpg">
        <br>
        <span>exemplo de texto grande independente do número de caracteres, sempre permanecerá alinhado a imagem</span>
      </div>
    </div>

http://www.bootply.com/M0WYutA1Mx

Using col-Sm, it "limits" the content placed on the right and also removes other content placed on the right.