在移动视图中更改列顺序(wordpress）.这是可能的

Change Column order in mobile view(wordpress). It is possible?

本文关键字：wordpress 顺序 视图 移动      更新时间：2023-09-26

我这里有一个问题。我想在移动设备上更改网站列顺序。我尝试使用javascript，但似乎不起作用是我的代码出了问题吗？我正在使用wordpress

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

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

[一]

[二]

[三]

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

[二]

[一]

[三]

这是我的代码

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

您可以使用 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;}
}

注意：宽度将发生变化（您可以根据需要设置）。

相关文章：