在移动视图中更改列顺序（wordpress）。有可能的？

i have a question here. I wanted to change website column order on the MOBILE. I try using javascript but seems is not working is something wrong with my code? Im using wordpress

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

Here is current desktop view : [a] [b] [c]

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

Current mobile view is something like this.

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

[a]

[b]

[c]

i wanted my column to appear like this

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

[b]

[a]

[c]

here is my code

这是我的代码

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

1 个解决方案

#1

you can use 2 html columns with container div like

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

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

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

Write Css Like :

写Css喜欢:

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

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

Note : width will be change (you set as you need).

注意:宽度将会改变(您可以根据需要进行设置)。

#1