html - 我如何使用 Bootstrap 网格系统调整到带有表格的小屏幕

Question

我有一个 PHP genreded 表，它检索数据并在表中动态显示数据。根据表格屏幕显示表格数据是必不可少的。

这是我的代码:

echo "<div class='container'><div class='row'><div class='col-sm-3'></div><div class='col-sm-6'><div class='table-responsive'><table border='0' class='table' >

<tr>
<td><img src='itempics/$i.jpg' width=200 height=200></td>
<td><h3>Product Details:</h3><b>Product:</b> ".$arr['pname']."<br>
<b>Item No:</b> ".$arr['itemno']."<br>
<b>Price:</b> ".$arr['price']."<br>
<b>Size:</b> ".$arr['size']."<br></td>

<td><h3>Buyer Details:</h3><b>Buyer:</b>  ".$arr['uname']."<br>
<b>Account No:</b> ".$arr['ac_no']."<br>
<b>Mobile No:</b> ".$arr['mob_no']."<br>
<b>Address:</b> ".$arr['add']."<br>
<b>Bank:</b> ".$arr['bank']."<br>
<b>City:</b> ".$arr['city']."<br>
<b>Order No:</b> ".$arr['order_no']."<br></td>
</tr>
</table>
</div>
</div>
<div class='col-sm-3'></div>
</div>
</div>

";

内部td我使用的类 .col-sm-3和各种bootstap方法，但当屏幕尺寸较小时，它不会根据屏幕采用。我在表格中看不到“买家详细信息”部分。即使我使用响应式图像类，但在这种情况下它用得更少。我想要的只是当屏幕尺寸较小时，图像在一行中，产品详细信息在下一行，买家详细信息在表格的下一行。任何人都可以告诉我如何正确地做到这一点......

我可以改用 div 标签吗 <td>标签？

Answer 1

在生成的 html 中使用 col-xs-val 代替 col-sm-val 宽度 <= 768px