Bootstrap中的响应式购物车

Question

是否可以将此购物车添加到Bootstrap 4中并使其具有响应能力？

我这样尝试过，但是在屏幕宽度1024px以下不能正常工作

这是一个非常不错的购物车，我真的很想在我的布局中使用它，但我无法使其具有响应性。

<div class="cart-main-area ptb--120 bg__dark">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <section id="cart"> 
            <div class="product">
                <header>
                    <a class="remove">
                        <img src="images/product/fruit-cake.jpg" alt="">

                        <h3>Remove Product</h3>
                    </a>
                </header>

                <div class="content">

                    <h1>Fruit Cake</h1>

                    1500 gram

                </div>

                <footer class="content">
                    <span class="qt-minus">-</span>
                    <span class="qt">2</span>
                    <span class="qt-plus">+</span>

                    <h2 class="full-price">
                        ฿29.98
                    </h2>

                    <h2 class="price">
                        ฿14.99
                    </h2>
                </footer>
            </div>

        </section>
            <footer id="site-footer">
        <div class="container clearfix">

            <div class="left">
                <h2 class="subtotal">Subtotal: ฿<span>163.96</span></h2>
                <h3 class="tax">Taxes (5%): ฿ <span>8.2</span></h3>
                <h3 class="shipping">Shipping: ฿ <span>5.00</span></h3>
            </div>

            <div class="right">
                <h1 class="total">Total: ฿ <span>177.16</span></h1>
                <a class="btn">Checkout</a>
            </div>

        </div>
    </footer>
        </div>
      </div>
    </div>
  </div>

请选择CodePen：

任何帮助将不胜感激。