我想对不同tr中的td元素进行排序.当手机尺寸变大时

Question

<table id="layouttable">
<tr>
<td class='col1'>1</td>
<td class='col2'>2</td>
<td class='col3'>3</td>
</tr>
<tr>
<td class='col4'>4</td>
<td class='col5'>5</td>
<td class='col6'>6</td>
</tr>
</table>

当手机尺寸变成

1 4
2
5
3
6

我想按上面的顺序列出它们。

由于tr.，弹性订单不可用

有人知道这样一个非常简单的解决方案吗？

Answer 1

一个快速而肮脏的解决方案：

@media only screen and (max-width: 600px) {
.desktop-table
{
display: none;
}
}
@media only screen and (min-width: 601px) {
.mobile-table
{
display: none;
}
}

<table id="layouttable" class="desktop-table">
<tr>
<td class='col1'>1</td>
<td class='col2'>2</td>
<td class='col3'>3</td>
</tr>
<tr>
<td class='col4'>4</td>
<td class='col5'>5</td>
<td class='col6'>6</td>
</tr>
</table>
<table id="layouttable-mobile" class="mobile-table">
<tr><td class='col1'>1</td></tr>
<tr><td class='col4'>4</td></tr>
<tr><td class='col2'>2</td></tr>
<tr><td class='col5'>5</td></tr>
<tr><td class='col3'>3</td></tr>
<tr><td class='col6'>6</td></tr>
</table>