移动时更改窗格的位置

Question

在桌面视图中，我们有一个左窗格和一个侧窗格。左侧窗格包含大量内容，以至于当在移动设备上呈现时，用户会忽略侧窗格。

在移动设备上呈现时，首先渲染左窗格，然后在左窗格后渲染侧窗格。有没有办法更改此行为，以便在移动浏览器中侧窗格显示在左窗格上方？

Answer 1

要在特定屏幕尺寸上将一个窗格放在另一个窗格上，我们使用z-index。

要执行此操作，只需使用css：

更改窗格z-index

@media (max-width: 767px) {
   .leftpane{
      z-index: 2;
   }
   .sidepane{
      z-index: 3;
   }
}

如果这对您有用，请告诉我。谢谢！

Answer 2

在皮肤中找到的第一个元素将是第一个渲染的元素。没有办法改变它（据我所知）。 但它可以像在DNN皮肤页面中切换两个div元素一样简单。

<div id="SidePane" class="SidePane" runat="server">
<div id="LeftPane" class="LeftPane" runat="server">

而不是

<div id="LeftPane" class="LeftPane" runat="server">
<div id="SidePane" class="SidePane" runat="server">

但是根据CSS和皮肤的HTML设计，这可能是一个简单的修复或完全破坏网站设计。如果您在DNN store（或其他供应商）购买了皮肤，可能值得向卖家询问。

Answer 3

我们最终通过为具有不同布局的移动设备制作单独的页面来实现我们的目标。如果检测到移动设备，DNN可以重定向到不同的页面。