如何根据不同的屏幕尺寸和JS

Question

我打算将大于600像素的屏幕尺寸显示为一个滑块，而小于600像素的屏幕尺寸显示为不带滑块的相同内容。我正在使用Bootstrap 4和Wordpress。由于某种原因，我的代码根本不返回任何内容。这是wordpress模板的代码：

<div class="container-fluid custom-bg-color" id="seccion-portafolio">
<div class="row">
    <div class="col">
      <div id="portafolio-variable-content">
      </div>
    </div>
  </div> 
</div>
<script>

(function () {

var viewportWidth = $(window).width();
if (viewportWidth > 600) {    
$('#portafolio-variable-content').load('slider.php');
$('#portafolio-variable-content').html("<p>Another test</p>")

} else {    
$('#portafolio-variable-content').load('no-slider-content.php');
}    
}());
</script>