Flow down tables with bootstrap - html

Question

I have a responsive bootstrap table (1 tr and 3 td) and when it comes to xs devices I want them to flow down.
<div class="container-fluid" id="maincontent">
<div class="table-responsive">
<table class="table"><tr><td>
<div class="thumbnail" id="tropthumb">
<img src="images/mainconimg/trophy.jpg" alt="trophies" id="mainconimg">
<div class="caption">
<h3 id="trop">Trophies</h3>
<p>View</p>
</div>
</div>
</td>
<td>
<div class="thumbnail" id = "medalthumb">
<img src="images/mainconimg/medals.jpg" alt="trophies" id="mainconimg2">
<div class="caption">
<h3 id="medal">Medals</h3>
<p>View</p>
</div>
</div>
</td>
<td>
<div class="thumbnail" id = "souvnthumb">
<img src="images/mainconimg/souvn.jpg" alt="trophies" id="mainconimg3">
<div class="caption">
<h3 id="souvn">Souvenirs</h3>
<p>View</p>
</div>
</div>
</td></tr></table>
</div>
</div>
**I have this table with single row and 3 td on it and each of td contains a thumbnail image. And when it comes to xs devices I want them to flow down like in the example picture please help me with this.
this is what i wanted to look like when it comes to xs devices

Answer 1

Are you using tables for a specific purpose? Because if not, you can use the grid on Bootstrap.
e.g.
<div class="row">
<div class="col-md-4 col-xs-12"> "your image here" </div>
<div class="col-md-4 col-xs-12"> "your image here" </div>
<div class="col-md-4 col-xs-12"> "your image here" </div>
</div>
But you can omit the code col-xs-12 because I think col-md-4 automatically flows them down if you resize your screen.