jquery - 响应数据表|根据屏幕尺寸更改标记

我的桌面设计有一个7列的表格状网格（使用Bootstrap），顶部的列名称为。

在小屏幕上，网格应变为3列。这7个列名分为2个单独的行，并与其他行交错。基本上，标记的顺序完全取决于屏幕大小。

解决此问题的最佳方法是什么？

我原本以为我会使用jQuery剪切并粘贴内容，但是现在我在猜测

我也看到了对responsejs的评论：Replace HTML depending on screen size
这为您提供了一种方便用户的方式来根据屏幕尺寸交换内容，尽管看起来好像有一个单独的移动页面...

最佳答案

较早的解决方案：

<table>
    <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
        <th class="visible-desktop">Header4</th>
        <th class="visible-desktop">Header5</th>
        <th class="visible-desktop">Header6</th>
        <th class="visible-desktop">Header7</th>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td class="visible-desktop">Data4</td>
        <td class="visible-desktop">Data5</td>
        <td class="visible-desktop">Data6</td>
        <td class="visible-desktop">Data7</td>
    </tr>
</table>

编辑：
因此，您的意思是您希望在小屏幕上使用此功能：

H1 H2 H3
D1 D2 D3
H4 H5 H6 H7
D4 D5 D6 D7

然后，您如何计划拥有下一行数据？像这样？ ：

H1 H2 H3
D1 D2 D3
H4 H5 H6 H7
D4 D5 D6 D7
H1 H2 H3
D8 D9 D10
H4  H5  H6  H7
D11 D12 D13 D14

好吧，这在小屏幕上并不能提供很好的用户界面！

但是，如果您仍然想要这样做，那么我建议您使用span div而不是表格。

在这种情况下，如下所示：

<div class='span12'> //Entire row1 which will be split into 2 for smaller screens
    <div class='span6'>
         <div class='span2'>
             <table>
                 <tr>
                 <td>H1</td>
                 </tr>
                  <tr>
                 <td>D1</td>
                 </tr>
             </table>
         </div>
         <div class='span2'>
              <table>
                     <tr>
                     <td>H2</td>
                     </tr>
                      <tr>
                     <td>D2</td>
                     </tr>
                 </table>
         </div>
         <div class='span2'>
          <table>
                 <tr>
                 <td>H3</td>
                 </tr>
                  <tr>
                 <td>D3</td>
                 </tr>
             </table>
         </div>
    </div>
    <div class='span6'>
        /*And so on*/
    </div>
</div>
<div class='span12'> //Entire row1 which will be split into 2 for smaller screens
...
</div>