jquery - 如何根据窗口大小使用表格单元格进行换行

我正在使用与智能手机兼容的Bootstrap 4做一个Web项目。我需要做的表是：
1.当窗口宽度变小时，表格单元格将被收起。
2.与智能手机相同。如果智能手机屏幕上没有足够的空间来显示页面，则表格单元格将被覆盖。

这就是我想要了解的：
https://www.w3schools.com/css/tryit.asp?filename=trycss_float_boxes
（但有表格单元格）

我在下面的示例代码中尝试执行上述操作。

我尝试过的解决方案：
-<div style="float:left;">
-<table style="table-layout:fixed;">和<td style="word-wrap:break-word;">

但是这些都不影响任何事情。

<div class="container-fluid">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="a.jpg"></img></td>
      <td><img src="b.jpg"></img></td>
      <td><img src="c.jpg"></img></td>
    </tr>
  </table>
</div>

更新：谢谢大家。我已经解决了这个问题。感谢您的回答和帮助：）

最佳答案

使用媒体查询，当低于768像素时使用display:grid ...这将为您提供所需的效果

下面的代码段：

@media screen and (max-width:768px) {
  tr {
    display: grid
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/JumboMob.jpg"></img>
      </td>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/JumboMob.jpg"></img>
      </td>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/JumboMob.jpg"></img>
      </td>
    </tr>
    <tr>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/Jumbo.jpg"></img>
      </td>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/Jumbo.jpg"></img>
      </td>
      <td><img class='img-fluid' src="https://www.akberiqbal.com/Jumbo.jpg"></img>
      </td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>