桌面：水平图片/内容，智能手机：垂直图片/内容

Question

我正在使用Wordpress响应式就绪主题，除了table或div容器外，它的效果非常好。

我遇到的主要问题是我的表格，如lichtundmusik.ch/vermietung/licht

所示

我想要的： 当我在智能手机上观看上面提到的同一页面时，图片应自动将文字和图片的顺序从水平更改为垂直

我想要的插图：Link to the Illustration

还有一个难点： 今天是我来到跨越Bootstrap的第一次，我试图实现它，但不幸的是，在网站标题中输入Bootstrap代码正在改变整个网站。

有人为我提供解决方案吗？谢谢你的回答

Answer 1

由于您的输出是一个表格，因此您必须使用CSS进行一些技巧才能实现此功能。 CSS-Tricks has a nice article explaining the basics。 TL; DR，您需要为css中的小屏幕创建另一个媒体查询，将您的表格单元格转换为块元素：

@media only screen and (max-width: 760px)  {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
}

对于第二部分，Bootstrap是一个庞大的框架，将改变一切。对于我需要大量响应的项目​​，我一直在使用Pure CSS，它在4.4KB的软件包中提供了很多响应式的好东西。