Woocommerce响应浮动问题

Question

我有以下设置单品设置：

<p class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol"></span>250</span></p>

<p class="stock in-stock">6</p>

<form class="cart" method="post" enctype="multipart/form-data">

.
.
.

</form>

对于768px以下的屏幕尺寸，我希望结果看起来像这样

[price]
[stock]
[qty + add_to_cart]

但它堆叠如下：

[price]
[qty + add_to_cart] [stock]

这是我的css：

@media (max-width: 768px) {


  .woocommerce div.product p.price {
  text-align: right;
  }

  .woocommerce div.product form.cart, 
  .woocommerce div.product p.cart {
    float: right;
  }

  .woocommerce div.product p.stock {
    float: right;
  }

}

如何将它们堆叠在一起？