Javascript 尝试仅在移动设备上移动wordpress标题

目前正在尝试完成Wordpress构建，但我遇到了一个小问题

我使用以下Jquery代码：

jQuery( document ).ready( function ($) {
    var mobile = $(window).width();
    if ( mobile <= 680 ){
        $( ".product_title.entry-title" ).insertBefore( ".woocommerce-product-gallery" );
    }
} );

jQuery（文档）.ready（函数（$）{
var mobile=$（window.width（）；
如果（mobile基于@Partha Roy的评论，您可以使用如下媒体查询：

.product\u title.entry-title.mobile-only{
显示：块；
}
.product_title.entry-title.desktop-only{
显示：无；
}
@介质（最小宽度：680px）{
.product_title.entry-title.mobile-only{
显示：无；
}
.product_title.entry-title.desktop-only{
显示：块；
}
}

或者在非移动响应优先策略中：

.product\u title.entry-title.mobile-only{
显示：无；
}
.product_title.entry-title.desktop-only{
显示：块；
}
@介质（最大宽度：680px）{
.product_title.entry-title.mobile-only{
显示：块；
}
.product_title.entry-title.desktop-only{
显示：无；
}
}

当然，你需要在你想要的地方放两套HTML

。。。
...

您可以参考这个类似的问题：
您可以使用WordPress内置的“移动检测”功能wp_is_mobile创建一个简单的快捷码，可以对移动访问者和/或桌面访问者隐藏内容的某些部分。当从移动浏览器查看您的网站时，wp_is_mobile功能返回true。使用此功能，您可以基于访问者设备创建自适应/响应WordPress主题

For example,

<?php  if( wp_is_mobile()){  ?>
 // mobile stuff goes here
   <div class="product_title entry-title mobile-only"> << Mobile Text >> </div>
<?php } else { ?>
   // desktop stuff goes here
   <div class="product_title entry-title desktop-only"> << Desktop Text >> </div>
<?php  } ?>

例如，
//这里有移动设备
> 
//桌面的东西在这里
> 
您可以保留两个标题，一个用于移动设备，另一个用于超过600px的视口。现在，使用css媒体查询控制标题的显示。无需使用Jquery。如上所述，媒体查询绝对是正确的解决方案。但是，要修复当前的实现，您需要查看
窗口。onresize
。如果使用此事件，您肯定也会希望使用去Bouncer。我知道我可以使用CSS媒体查询。但这将涉及挖掘我的Wordpress主题和混乱布局。我正在尝试避免接触任何HTML。这是一个很好的解决方案。只需在该部分添加自定义类（允许WP选项）通过媒体查询使用这个类定位标题，你不需要JS，我知道如何使用媒体查询哈哈…我的问题是需要进入我正在使用的Wordpress主题，并在一些HTML中进行编辑。我甚至不知道在编辑主题文件时从何处开始。因此，我只是在寻找一个快速的Jquery解决方案。--如果我我知道在我的主题文件中编辑的位置，我只需要创建另一个标题并为其提供一个移动类。您应该参考此答案以获得一个好的解决方案：