javascript - 如何更改表内元素的顺序？

Question

Demo

我将此表与 css-trick 一起使用响应表的解决方案。现在我还想做的是在表格更改后更改元素的顺序 (768px)，以便 <h3>和图像更改顺序，因此它将是 1. 标题，2. 图片，3. 文本。

我该怎么做？

这是我目前所拥有的

<table border="0">
    <tbody>
        <tr>
            <td class="aimg">
                <img src="#">
            </td>
            <td class="atext">

<h3>Title 1</h3>

                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </td>
        </tr>
        <tr>
            <td class="aimg">
                <img src="#">
            </td>
            <td class="atext">

<h3>Title2</h3>

                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </td>
        </tr>
    </tbody>
</table>

CSS

.actions table td {
    vertical-align: top;
}
.actions table td.aimg {
    width:175px;
    padding-bottom:20px;
}
.actions table td.atext {
    padding-left:20px;
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    .actions table, thead, tbody, th, td, tr {
        display: block;
    }
    .actions table tr {
        border-bottom:1px dashed #c0c7c7;
        margin-bottom:20px;
    }
    .actions table td.aoptions {
        padding-left:0px;
    }
}

Answer 1

Fiddle

由于表格标记，这有点棘手。 基本上，你给 tr 这个 css:

position: relative;

然后将标题绝对定位在左上角，并根据标题的高度为图像提供适当的顶部填充。

对此可能有更好、更灵活的解决方案。

还有...为什么要对一个显然不是表格的元素使用表格标记？