页面刷新后的响应能力？ （HTML 呈现延迟）

Question

当我将屏幕尺寸更改为手机或小于 768px 的东西时，搜索栏显示在顶部并移动 刷新页面后先到正确的位置。然而，它应该从一开始就到位。当我将屏幕调整回全宽时，它会消失，直到页面刷新。 您可以检查行为 https://www.mysurface.shop 并在浏览器控制台中切换到某个手机屏幕。

这个行为的js是

    function searchwidget(){

if ($(document).width() <= 767)
{
    $('#search_widget').appendTo('.hidden-md-up.text-xs-center.mobile');
}
else if($(document).width() >= 768)
{
    $('.header-top #search_widget').prependTo('.right-nav');
}

这是模板代码

{block name='header_nav'}
   <nav class="header-nav">
   <div class="container">
    <div class="row">
      <div class="hidden-sm-down">
       <div class="col-md-4 hidden-sm-down" id="_desktop_logo">
            <a href="{$urls.base_url}" class="header-logo">
              <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
            </a>
        </div>
        
        <div class="col-md-5 col-xs-12 left-nav">
          {hook h='displayNav1'}
        </div>
      
        <div class="col-md-3 right-nav">
            {hook h='displayNav2'}
        </div>
      </div>
      <div class="hidden-md-up text-xs-center mobile">
       
        <div class="pull-xs-right" id="_mobile_user_info"></div>
        <div class="pull-xs-right" id="_mobile_cart"></div>
        <div class="pull-xs-left" id="menu-icon">
          <i class="material-icons d-inline">&#xE5D2;</i>
        </div>
        <div class="top-logo" id="_mobile_logo"></div>
        <div class="clearfix"></div>
        
      </div>
    </div>
</div>

{/堵塞}

如何解决这个问题？