如何更改移动设备表列的顺序

Question

我正在为客户编辑时事通讯，我一直被困在这个。。。

这是我的桌子的例子

https://jsfiddle.net/xocrqwLs/

问题是移动设备看起来像这样

|---------|
| [image] |
|  text   |
|---------|
|  text   |
| [image] |
|---------|

我想让它看起来像这样

|---------|
| [image] |
|  text   |
|---------|
| [image] |
|  text   |
|---------|

如何更改移动设备的表列？

谢谢你！

Answer 1

如果使用引导，则可以使用“隐藏”和“可见”显示属性。

例如：
-创建两个版本的表：一个用于更大的屏幕，一个用于移动。
-在大屏幕上时，使用隐藏隐藏小屏幕版本和可见使大屏幕表可见。
-在移动屏幕上，使用隐藏隐藏大屏幕版本和可见使移动版本的表可见。

这个问题详细讨论了Bootstrap 3和Bootstrap 4的工作原理：在响应性布局中隐藏元素？

有关它在Bootstrap 4中如何工作的更多信息：在Bootstrap v4中缺少可见-**和隐藏-**

Answer 2

table.info tr {
  display: flex;
  flex-direction: column;
  width: 100%;
}

table.info tr td,
table.info,
table.info tbody {
  display: block;
  width: 100%;
}

<table class="info">
  <th>
    <tr>
      <td>
        <img src="https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com">
      </td>
      <td>
        Lorem Ipsum dolor
      </td>
    </tr>

    <tr>
      <td>
        <img src="https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com">
      </td>
      <td>
        Lorem Ipsum dolor
      </td>

    </tr>
  </th>
</table>

Answer 3

你不能改变两个元素的显示顺序，除非你使用flexbox（表有show： table而不是show： flex）；此外，表行为非常严格，无论如何都不允许这种灵活性，电子邮件平台兼容性也不允许您可以用flexbox替换表，而不会出现严重的兼容性问题。

在您的位置上，我要做的是在包含图像的元素之后添加另一个带有“lorem ipsum”的td元素：然后您可以使用媒体查询隐藏一个或另一个元素。