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

标签 html css bootstrap-4 responsive

我正在为客户编辑时事通讯,但我一直卡在这个...

这是我的表格示例

https://jsfiddle.net/xocrqwLs/

问题出在移动设备上,如下所示

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

我希望它看起来像这样

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

如何更改移动设备的表格列?

谢谢!

最佳答案

你不能改变两个元素的显示顺序,除非你使用 flexbox(表格有 display: table 而不是 display: flex);此外,表格行为非常严格,无论如何都不允许这种灵 active ,并且电子邮件平台兼容性不允许您在没有严重兼容性问题的情况下用 flexbox 替换表格。

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

关于html - 如何更改移动设备的表格列顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56429172/

相关文章:

html - 在文本下方显示行列表

html - Aside disappeared suddenly - 没见过这个问题

javascript - 单击时未打开下拉菜单

css - li 水平悬停整条线

twitter-bootstrap - 我的 "online-card"需要一些帮助

html - 绝对位置会导致图像比原来更大吗?

javascript - 如何在动态添加内容时居中对齐 div

javascript - 。玩();不适用于 HTML5 媒体元素

javascript - 如何使信息框在点击时出现在网站上

css - 具有绝对定位的 Chid Div 与父级中的内容重叠