我有一个选择元素，我只想显示在较小的屏幕上，比如
我希望两个框都出现在更大的屏幕上，但是当我低于 600px 时，我希望选择出现，然后只显示 #core-box 并隐藏 #pro-box，然后根据选择选项，将显示隐藏核心/专业。
如何修改我的 jQuery 来执行此操作？
目前，我在 CSS 媒体查询中隐藏了选择，并以 599 像素显示，但在较大的屏幕上，仅显示 #core-box。
@media all and (min-width: 600px) {
.blog-filters {
display: none;
}
}$(document).ready(function(){
$("#selectMe").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("value")=="core"){
$("#pro-box").hide();
$("#core-box").show();
}
if($(this).attr("value")=="pro"){
$("#core-box").hide();
$("#pro-box").show();
}
});
}).change();
});<div class="blog-filters">
<div class="select-container">
<select id="selectMe">
<option value="core">Core</option>
<option value="pro">Pro</option>
</select>
</div>
</div>
<div class="pricing-box" id="core-box">
<div class="row">
<div class="column">
<div class="core">
<h2>Core</h2>
</div>
</div>
</div>
</div>
<div class="pricing-box" id="pro-box">
<div class="row">
<div class="column">
<div class="core">
<h2>Pro</h2>
</div>
</div>
</div>
</div>