Поток вниз с загрузочным столом

Question

У меня есть отзывчивая таблица начальной загрузки (1 tr и 3 td), и когда дело доходит до устройств xs, я хочу, чтобы они текли вниз.

<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><a href="trophies.html" class="btn btn-primary" id = "btnview" role="button">View</a></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><a href="medals.html" class="btn btn-primary" id = "btnview2" role="button">View</a></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><a href="souvenirs.html" class="btn btn-primary" id = "btnview3" role="button">View</a></p> 
</div> 
</div> 
</td></tr></table> 

</div> 
</div> 

** У меня есть эта таблица с одной строкой и 3 td на ней, и каждый из td содержит уменьшенное изображение. И когда дело доходит до устройств xs, я хочу, чтобы они текли вниз, как в примере, пожалуйста, помогите мне с этим.

this is what i wanted to look like when it comes to xs devices

Answer 1

Вы используете tables для определенной цели? Потому что, если нет, вы можете использовать grid в Bootstrap.

например.

<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> 

Но вы можете опустить код col-xs-12, потому что я думаю, col-md-4 автоматически перетекает их при изменении размеров экрана.