Joomla 3.3.3 - 特定于设备的模块显示和隐藏

Question

我正在使用JA Purity III模板构建一个站点，在PC上，在文章旁边的右侧显示模块。但是，在小屏幕上，模块被推到文章下面。我真正想做的是将模块隐藏在最小的屏幕上，并在文章上方的位置显示模块的修改副本。

使用此模板，我可以打开和关闭各种尺寸的响应设备的模块显示，但是为Pcs等关闭它们也会为所有设备关闭它们。

一个例子：PC上的http://www.timhillpsychotherapy.com/test2014/introversion.html在文章旁边有绿色模块，在移动屏幕上它被推到下面。相反，在一个小的碎片上，我只想拥有上面绿色模块的变体。

我真的很感激任何建议。

Answer 1

您必须在模板中添加2个模块，并根据css媒体查询显示/隐藏它们。

最好添加模块后缀以帮助您选择它们​​：Advanced -> Module Class Suffix。

你的css选择器必须像：

@media (max-width: 700px) {
  div.module_modsuffix1 { display: none; }
  div.module_modsuffix2 { display: block; }
}

@media (min-width: 701px) {
  div.module_modsuffix1 { display: block; }
  div.module_modsuffix2 { display: none; }
}

祝你好运！