Question

我在Wordpress中有一个页面（带有Site Origin Page Builder插件），如下所示：

（■=图像 T =文本）

■-t

叔■

■-t

崩溃后它看起来像这样：

■

吨

■

吨

我想要的是：

■

吨

■

吨

■

吨

为了达到这个目的，我需要在屏幕上切换每个:odd第一和第二div，宽度为770像素。我需要它开箱即用，所以我的客户可以做自己的东西而不用担心布局。这就是页面：http://darylkeep.com/blog这就是我所拥有的。我觉得我非常接近：

$(window).on("resize", function(){

  var width = $('body').width();
  var strDiv1Cont = $(".panel-grid:odd div:eq(0)").html();
  var strDiv2Cont = $(".panel-grid:odd div:eq(1)").html();

  if(width < 770){

    $(".panel-grid:odd div:eq(0)").html(strDiv2Cont);
    $(".panel-grid:odd div:eq(1)").html(strDiv1Cont);

 }else{
    $(".panel-grid:odd div:eq(0)").html(strDiv1Cont);
    $(".panel-grid:odd div:eq(1)").html(strDiv2Cont);
 }
});

Answer 1

我很确定这不会对我有所帮助，但我不会隐瞒这个答案。也许它仍然有帮助。看着代码我假设你正在使用Site Origin Pagebuilder，对吧？（那里有很多页面构建器）

据我所知，SO不支持这种情况。可悲的是。所以我为我的主题所做的就是使用 https://github.com/chasecmiller/Foundation-6-and-SiteOrigin-Panels并将其扩展为输出PageBuilder作为Foundation6代码。

在基础6中，你可以选择你想要的东西： http://foundation.zurb.com/sites/docs/grid.html - ＆gt;来源订购

接下来，您可以编写一个自定义小部件，用户可以在其中选择元素在移动设备上的位置（顶部或底部） - ＆gt;我一直在这么做，以揭示完整的页面构建功能。

我知道你必须做一个疯狂的事情来使用这个解决方案。但是看着你的主题，对不起！，它不是那么特别/难以让你重启。使用Foundation，您应该可以快速构建http://darylkeep.com/blog/

下可见的当前布局

希望这可以帮助你以任何方式......即使是下一个项目。

一切顺利

Answer 2

您可以在不使用JavaScript但使用相对定位的纯CSS的情况下实现此目的。

在您的网站中， .panel-grid-cell 是列，您将每个布局设置为作曲家中的图像+文字

.panel-grid,.panel-grid-cell {
    position: relative
}
.panel-grid .panel-grid-cell:first-child{
    left:70%; /*the width of the text column*/
}
.panel-grid .panel-grid-cell + .panel-grid-cell{
    right:30%; /*the image container width*/
}

当然，您可以在第一个面板中添加另一个类，以避免这种情况发生。

Wordpress（页面构建器）将崩溃时的div切换为移动设备

2 个答案: