css - Footable:更改手机屏幕中的行位置

Question

我有一个 footable 如下:

该列以状态开头，然后是标题、I、II、III、IV、V、VI、VII、日期。

切换到手机新版时，也是按照如下图所示的顺序

我想重新排列 Status 列并将其显示在 VII 列之后。

我尝试通过搜索在线和脚注文档，但似乎没有类似的解决方案。

感谢任何帮助!谢谢!

<table class="footable" cellspacing="0" border="0" id="dnn_ctr538_list_gvList" style="border-collapse:collapse;">
  <thead>
    <tr class="Head nodrag nodrop" style="font-weight:normal;">
      <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 5%; display: table-cell;">Status</th>
      <th align="center" valign="middle" scope="col" style="width:40%;">Title</th>
      <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">I</th>
      <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">II</th>
      <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">III</th>
      <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">IV</th>
      <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">V</th>
      <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">VI</th>
      <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">VII</th>
      <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 10%; display: table-cell;">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="left" valign="middle" style="display: table-cell;">
        <div style="padding-left: 10px">

        </div>
      </td>
      <td align="left" valign="middle">
        <div style="padding-left: 10px">
          test
        </div>
      </td>
      <td align="center" valign="middle" style="display: table-cell;">
        <img src="http://www.clker.com/cliparts/a/L/I/b/q/o/green-check-mark.svg" style="border-width:0px; width:70px; height: 70px;">
      </td>
      <td align="center" valign="middle" style="display: table-cell;">

      </td>
      <td align="center" valign="middle" style="display: table-cell;">
        <img src="http://www.clker.com/cliparts/a/L/I/b/q/o/green-check-mark.svg" style="border-width:0px; width:70px; height: 70px;">
      </td>
      <td align="center" valign="middle" style="display: table-cell;">

      </td>
      <td align="center" valign="middle" style="display: table-cell;">

      </td>
      <td align="center" valign="middle" style="display: table-cell;">

      </td>
      <td align="center" valign="middle" style="display: table-cell;">

      </td>
      <td align="center" valign="middle" style="display: table-cell;">
        11/07/2013
      </td>
    </tr>
  </tbody>
</table>

Answer 1

我无法完全重现代码，但是添加两个“状态”行并以不同的分辨率只显示其中一个呢？

JSFiddle here .我将 Footable 与 Bootstrap 结合使用。

HTML

<table class="footable" cellspacing="0" border="0" id="dnn_ctr538_list_gvList" style="border-collapse:collapse;">
<thead>
<tr class="Head nodrag nodrop" style="font-weight:normal;">
  <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 5%;" class="hide_small">Status</th>
  <th align="center" valign="middle" scope="col" style="width:40%;">Title</th>
  <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">I</th>
  <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">II</th>
  <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">III</th>
  <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">IV</th>
  <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">V</th>
  <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">VI</th>
  <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 4%; display: table-cell;">VII</th>
  <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 5%;" class="hide_big">Status</th>
  <th align="center" valign="middle" data-hide="phone" scope="col" style="width: 10%; display: table-cell;">Date</th>
</tr>
</thead>
<tbody>
<tr>
  <td align="left" valign="middle" style="display: table-cell;">
    <div style="padding-left: 10px"></div>
  </td>
  <td align="left" valign="middle">
    <div style="padding-left: 10px">test</div>
  </td>
  <td align="center" valign="middle" style="display: table-cell;">
    <img src="http://www.clker.com/cliparts/a/L/I/b/q/o/green-check-mark.svg" style="border-width:0px; width:70px; height: 70px;">
  </td>
  <td align="center" valign="middle" style="display: table-cell;">

  </td>
  <td align="center" valign="middle" style="display: table-cell;">
    <img src="http://www.clker.com/cliparts/a/L/I/b/q/o/green-check-mark.svg" style="border-width:0px; width:70px; height: 70px;">
  </td>
  <td align="center" valign="middle" style="display: table-cell;">

  </td>
  <td align="center" valign="middle" style="display: table-cell;">

  </td>
  <td align="center" valign="middle" style="display: table-cell;">

  </td>
  <td align="center" valign="middle" style="display: table-cell;">

  </td>
  <td align="center" valign="middle" style="display: table-cell;">
    11/07/2013
  </td>
</tr>

CSS

.hide_small {display: table-cell;}
.hide_big {display: table-cell;}

@media (min-width: 476px) {
   .hide_small {display: table-cell;}
   .hide_big {display: none;}
}

@media (max-width: 476px) {
   .hide_small {display: none;}
   .hide_big {
       display: table-cell;
    }