我的header.php :

<script type="text/javascript">
/* to show back the left side bar back when the LEFT side bar is moved next/below to the center/content */
    jQuery(document).ready(function($) {        
        $(window).resize(function() {
          if ($(window).width() < 1018) {            
             $(\'.tm_left\').insertAfter(".tm_center");
             $(\'.tm_left\').show();
          }
         else {
            $(\'.tm_left\').insertBefore(".tm_center");
         }
        }); 
    });  
</script>

此代码将我的HTML结构更改为：

<div class="tm_left">
    <!-- left side bar code-->
</div>
<div class="tm_center">
    <!-- content code-->
</div>
<div class="tm_right">
    <!-- right side bar code-->
</div

至

<div class="tm_center">
    <!-- content code-->
</div>
<div class="tm_left">
    <!-- left side bar code-->
</div>
<div class="tm_right">
    <!-- right side bar code-->
</div>

调整浏览器大小时效果很好。

但当我在设备中检查时.tm_left { display: none; } 此外，HTML标记与以下内容相同：

<div class="tm_left">
    <!-- left side bar code-->
</div>
<div class="tm_center">
    <!-- content code-->
</div>
<div class="tm_right">
    <!-- right side bar code-->
</div

“我的孩子”主题css有以下内容：

@media (max-width: 768px) { /*  removing side bar below the screen size 768.. starts from iPad portrait view */     
    .tm_left { display: none; width: 231px; }
}

为什么它不能像在浏览器上那样在移动设备上工作？

<script type="text/javascript">
/* to show back the left side bar back when the LEFT side bar is moved next/below to the center/content */
    function responsive_sidebar() {
        if ( jQuery(window).width() < 1018 ) {            
            jQuery(\'.tm_left\').insertAfter(".tm_center");
            jQuery(\'.tm_left\').show();
        } else {
            jQuery(\'.tm_left\').insertBefore(".tm_center");
        }
    }

    jQuery(document).ready(function() {
        responsive_sidebar();

        $(window).resize( responsive_sidebar ); 
    });  
</script>