Estou usando uma tabela para alinhar imagens e um texto. Porém, quando a resolução é baixa, ele fica muito desagradável e eu queria colocar o texto embaixo,em resoluções baixas. Como fazer isso, sendo que estão dentro de uma tabela?
Código:
<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>
Imagem:https://i.sstatic.net/i91Vu.png
Como faria para por embaixo,mesmo tando em uma tabela ?
col-sm