【问题标题】:Change Column order in mobile view(wordpress). It is possible?在移动视图(wordpress)中更改列顺序。有可能的?
【发布时间】:2016-02-12 11:39:35
【问题描述】:

我有一个问题。我想在 MOBILE 上更改网站列顺序。我尝试使用 javascript 但似乎无法正常工作是我的代码有问题吗?我用的是wordpress

这是当前桌面视图:[a] [b] [c]

当前的移动视图是这样的。

[a]

[b]

[c]

我希望我的专栏看起来像这样

[b]

[a]

[c]

这是我的代码

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 480){
     $('.b').insertBefore('.a');
  }else{
     $('.b').insertAfter('.a');
  }
</script>

【问题讨论】:

    标签: javascript css wordpress mobile


    【解决方案1】:

    您可以使用 2 个带有容器 div 的 html 列

    <div class="for_desktop">
    [a]
    [b]
    [c]
    </div>
    
    <div class="for_mobile">
    [b]
    [a]
    [c]
    </div>
    

    像这样写 Css:

    @media only screen and (max-width: 500px) {
       .for_desktop{ display:none;}
    }
    
    @media only screen and (min-width: 500px) {
       .for_mobile{ display:none;}
    }
    

    注意:宽度会发生变化(根据需要设置)。

    【讨论】:

      猜你喜欢
      • 2015-07-29
      • 1970-01-01
      • 1970-01-01
      • 2020-10-23
      • 2012-08-23
      • 1970-01-01
      • 2018-09-22
      • 2013-08-08
      • 1970-01-01
      相关资源
      最近更新 更多