如何将我的 shopify 产品价格移动到另一行?

How can I move my shopify product price to another line?

我目前正在尝试调整我在 shopify 中的价格位置。在桌面视图中,它位于标题的右侧,非常适合。对于移动设备,我想将价格移到标题下方,因为手机没有那么多 space 可以使用。我将在下面插入代码以及它在移动和桌面上的样子。

代码:

桌面:

手机:

使用CSS文件末尾的CSS

@media screen and (max-width:767px){
    .template-collection .product-details-div,
    .product-recommendations .product-details-div{ 
      flex-direction:column; 
     }


    .template-collection .product-details-div-price, 
    .product-recommendationsproduct-details-div-price {
      margin-top: 3px;
    }
}

如果不与其他CSS冲突,它看起来像这样。