我正在开发一个具有Bootstrap手风琴功能的部分。 3种产品类别中有3种手风琴。一旦屏幕尺寸为767px宽，就会堆叠3个产品类别，一个堆叠在另一个之上。在这一点上，我希望每个手风琴直接出现在相应的类别下。
我有一些接近工作的东西。以下是HTML的外观：
<div class="container panel panel-default">
<div class="intro"></div>
<div class="row people prods">
<div class="col-md-4 col-sm-4 item aos-init aos-animate" id="productOneButton" data-aos="fade-up" data-aos-delay="600">
<div class="box">
<img class="img-circle no-circle" src="[img path].jpg"
data-bs-hover-animate="pulse">
<h3 class="name2">Product 1</h3>
<p class="description2">Product 1 description</p>
<button class="btn btn-primary" data-parent="#accordion" data-toggle="collapse"
data-target="#product-one" type="button">More Information
</button>
</div>
</div>
<div class="col-md-4 col-sm-4 item aos-init aos-animate" id="productTwoButton" data-aos="fade-up" data-aos-delay="750">
<div class="box">
<img class="img-circle no-circle" src="[img path].jpg"
data-bs-hover-animate="pulse">
<h3 class="name2">Product Two</h3>
<p class="description2">Product 2 description</p>
<button class="btn btn-primary" data-parent="#accordion" id="productTwoButton" data-toggle="collapse"
data-target="#product-two" type="button">More Information
</button>
</div>
</div>
<div class="col-md-4 col-sm-4 item aos-init aos-animate" id="productThreeButton" data-aos="fade-up" data-aos-delay="900">
<div class="box">
<img class="img-circle no-circle" src="[img path].jpg"
data-bs-hover-animate="pulse">
<h3 class="name2">Product Three</h3>
<p class="description2">Product three description</p>
<button class="btn btn-primary" data-parent="#accordion" data-toggle="collapse"
data-target="#product-three" type="button">More Information
</button>
</div>
</div>
</div>
<div class="products-accordion panel-collapse collapse" id="product-one">
<div class="arrow-up"></div>
<div class="accordion-container">
<p>Suspendisse potenti. Curabitur nec mollis magna. Donec viverra, felis id scelerisque accumsan,
dui velit scelerisque tellus, in blandit nisl ante eu dui. Aliquam sodales libero ac lectus
vehicula mollis. Suspendisse viverra diam arcu, non placerat risus pretium sit amet. Vivamus
varius, lorem vitae fermentum dignissim, sapien eros tincidunt nisi, quis rhoncus libero tellus
vulputate tellus. Nulla non ex id sapien ultricies placerat. Sed consequat felis elementum
ullamcorper ultricies.</p>
</div>
</div>
<div class="products-accordion panel-collapse collapse" id="product-two">
<div class="arrow-up"></div>
<div class="accordion-container">
<p>Praesent tempor augue lorem, vel elementum ante ornare eget. Donec pharetra, ex ultrices pellentesque
imperdiet, dui risus pharetra elit, pulvinar feugiat felis ligula at augue. Sed convallis eget justo
sed tincidunt. Morbi lobortis metus quis massa consectetur scelerisque. Duis volutpat suscipit
tellus, tincidunt elementum est volutpat nec. Pellentesque eleifend erat lorem, et efficitur neque
convallis eu. Aenean aliquam nisi ut metus aliquam faucibus. Mauris at congue ex. Morbi dapibus
velit
non est laoreet egestas. Nulla turpis neque, interdum in tincidunt vitae, gravida id elit. Nunc
felis
risus, faucibus ut ipsum eget, dictum placerat ligula. Mauris ultricies diam ut congue
scelerisque.</p>
</div>
</div>
<div class="products-accordion panel-collapse collapse" id="product-three">
<div class="arrow-up"></div>
<div class="accordion-container">
<p>Phasellus laoreet porttitor augue at placerat. Morbi ac turpis leo. Proin elementum risus augue, sit
amet luctus ante porta vel. Vestibulum pharetra felis condimentum, dignissim metus at, fermentum
justo.
Suspendisse eget mi placerat, mollis nunc id, euismod tortor. Integer quis lacus nec lacus maximus
venenatis. Integer sed scelerisque lacus. Nunc bibendum sodales ligula, eu dignissim dolor. Fusce
ullamcorper velit quis ex porta blandit. In placerat, lorem eget imperdiet pulvinar, nisi arcu
bibendum
ipsum, ac porta quam felis sed erat. Vivamus est nulla, vestibulum a sem sed, blandit congue purus.
Praesent aliquam, felis et egestas ornare, tortor eros lobortis leo, laoreet volutpat dui nisl a
lectus.
Praesent ullamcorper eget enim eu tristique. Cras purus dolor, aliquet at gravida id, placerat ac
lectus.</p>
</div>
</div>
</div>
</div>
这是jQuery：
$(document).ready(function() {
function checkWidth() {
var windowsize = $(window).width() + 16;
var product1Container = $('#product-one');
var product2Container = $('#product-two');
var product3Container = $('#product-three');
var productOneButton = $('#productOneButton');
var productTwoButton = $('#productTwoButton');
var productThreeButton = $('#productThreeButton');
var ProductsSection = $('.prods');
if (windowsize <= 767) {
productOneButton.append(product1Container);
productTwoButton.append(product2Container);
productThreeButton.append(product3Container);
product1Container.removeClass('in');
product2Container.removeClass('in');
product3Container.removeClass('in');
}
else{
product1Container.insertAfter(ProductsSection);
product2Container.insertAfter(ProductsSection);
product3Container.insertAfter(ProductsSection);
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
问题是，每次将屏幕调整为小于767px的宽度时，都会删除'in'类。当我到达767px时，我只想删除'in'类。我尝试使用媒体查询为767px的每个手风琴div设置display: none，但这会破坏手风琴的滑动动画效果，因此它只会出现或消失（看起来不太吸引人）。
有没有办法可以修改我的jQuery，只在767px的屏幕尺寸上删除'in'类，而不会破坏手风琴的动画效果？