我正在為一個網站使用bootstrap 5，當屏幕寬度為767像素時，顯示元素會出現問題。

例如，我有2個不同的元素來顯示手機和屏幕的產品信息。最暢銷產品-手機和。最暢銷的產品-屏幕顯示在一起

Html代碼

<div class="product-card-details best-selling-product-screen">
    <div class="product-card-prices">
        //price here            
    </div>
    <div class="product-card-add-to-cart">
        //add to cart btn here 
    </div>
</div>

<div class="product-card-details best-selling-product-mobile">
    <div class="product-card-prices">
        //price here            
    </div>
    <div class="product-card-add-to-cart">
        //add to cart btn here 
    </div>
</div>

和css

.product-card-details {
    display: flex;
    justify-content: end;
    min-height: 50px;
}

.product-card-prices {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: end;
}

.product-card-add-to-cart {
    display: flex;
    justify-content: flex-end;
}


@media ( min-width: 768px){
  .best-selling-product-mobile{
    display: none !important;
  }
}

@media ( max-width: 767px){
    .best-selling-product-screen{
        display: none !important;
    }
}

body {
    transition: margin-left 0.2s;
}

*, ::after, ::before {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
    line-height: var(--bs-body-line-height);
    text-align: var(--bs-body-text-align);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

另一個元素也有類似的問題。此外，這僅適用于屏幕寬度= 767像素的情況。如果寬度= 768像素或768像素，則沒有問題。

好像是767像素的寬度，兩種風格對于寬度& lt767px和寬度& gt768像素工作