页面刷新后的响应性工作?(HTML渲染延迟)

Question

当我将屏幕大小更改为手机或小于768px时，搜索栏显示在顶部并移动在刷新页面后首先将其移到右侧位置。然而，它从一开始就应该是正确的。当我将屏幕大小调整回全宽时，它会消失，直到页面刷新。你可以检查行为[链接已删除]，只需切换到浏览器控制台的电话屏幕。

这个行为的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>

{/块}如何解决这个问题?

Answer 1

感谢@CBroe部分解决方案是

function searchwidget(){

window.addEventListener('resize', function(event) {
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');
}
}, true);
}