Html 根据需要使购物车设计与移动设备兼容

我是一名初级开发人员，我正在尝试为商店创建购物车页面设计

正如你在截图中看到的，我已经完成了大部分桌面设计

我必须做的设计：

我做的设计是：

但我无法在移动设计中创建所需的结构

我必须做的设计：

我做的设计是：

如何根据需要对手机设计进行编码？

您也可以通过链接进行检查。

HTML

如果您能支持，我将不胜感激，谢谢

{{ 'cart.scss.css' | asset_url | stylesheet_tag }}

<div class="cart">
  <div class="container">

    <div class="b_cart">
      <div class="cart__items">
        <h2 class="fs-20 fw-b tt-u pb-30">Ihr Warenkorb</h2>
        
        <div class="cart__products">
          <div class="cart__row cart__header bb--grey fs-14">
            <div class="f-2"></div>
            <div class="f-5">Artikel</div>
            <div class="f-3">Preis</div>
            <div class="f-2">Menge</div>
            <div class="f-1">Summe</div>
            <div class="f-1"></div>
          </div>
          <div class="cart__product cart__row bb--grey middle">
            <div class="cart__productImage"><a href="https://cdn.shopify.com/s/files/1/0306/6557/2492/products/13.jpg?v=1578655357"><img style="max-height: 100px; align-content: center;" src="https://cdn.shopify.com/s/files/1/0306/6557/2492/products/13.jpg?v=1578655357" alt=""></a></div>
            <div class="cart__productTitle f-5 fw-b px-1">Gelée Royale Blütenpollen Propolis (Kautabletten)</div>
            <div class="cart__productPrices f-3 px-1"><span class="fw-b">€63,91</span> <span class="fw-b td-o fc-g">€63,91 </span><br /> <span class="fw-b fc-g fs-12 ta-r">€536,72/kg</span></div>
            <div class="cart__productQty f-2 px-1">Menge</div>
            <div class="cart__productPrice f-1 fw-b px-1">€127,91</div>
            <div class="cart__productDelete f-1 ta-r">X</div>
          </div>
          <div class="cart__row bb--grey">
                
          </div>
          <div class="cart__row bb--grey">
                
          </div>
        </div>
        <div>
           <a href="/collections/all" class="back_to_shop update-button fw-b fs-14">Weiter einkaufen</a>
        </div>
      </div>
      <div class="cart__summary fw-b">
        <h2>Gesamtsumme</h2>
        
        <div class="cart__price">
          <div class="cart__row">
            <div>Zwischensumme</div>            
            <div>€172,56</div>
          </div>          
          <div class="cart__row red">
            <div>Rabatt</div>            
            <div>€8,56</div>
          </div>
          <hr />
          <div class="cart__row">
            <div class="cart__priceText">Summe</div>
            <div class="cart__priceNumber fs-20">€163,91</div>
          </div>
          <div class="cart__row fs-12 pb-30">
            <div>Kostenloser versand ab €34,99</div>
          </div>
        </div>
        <div class="cart__checkboxes">
          <div class="cart__agreement pb-10"><input type="checkbox" class="input-checkbox limoniapps-discountninja-checkout-checkbox" value="1" data-message="{{ section.settings.sales_agreement_message}}" >{{ section.settings.sales_agreement_text}}</div>
          <div class="cart__marketing">  
            <div><input type="checkbox" class="input checkbox allow-marketing" /></div>
            <div>Bitte halten Sie mich per E-Mail und Text-Nachrichten über Neuigkeiten und exklusive Angebote auf dem Laufenden.</div>  
          </div>
        </div>
        <div class="cart__checkout">   
          <div>
            <input class="cart__checkoutButton button fw-b" type="submit" name="checkout"value="{{ section.settings.checkout }}">
          </div>
        </div>
      </div>
    </div>
  
  </div>
</div>

.b_cart {
  display: flex;
  min-height: 100%;
  
  h2 {
    margin: 0;
  }
  
  .button {
  display: block;
  width: 100%;
  border: none;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  }

  .cart__items {
    flex: 8;
    padding: 30px;

    /* debug */
    height: 300px;
  }
  
  .cart__productImage{
    flex: 2;
  }
  
  .cart__productTitle{
   flex: 5; 
  }

  .cart__header {
    font-size: 14px; 
    font-weight: bold;
  }

  .cart__summary {
    flex: 4;
    padding: 30px;
    border: 1px solid #ADADAD;
    /* debug */
  }

  .cart__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
  }
  
  .cart__checkboxes{
    font-size: 12px;
  }
  
  .cart__products {
    margin: 0;
  }
  
  .cart__marketing{
    display: flex;
    margin-top: 10px;
  }
  
  .bb--grey {
    border-bottom: 1px solid #adadad;
  }

  .cart__price {
    padding-top: 20px;
  }
  
  .cart__productImage{
    height: 100px;
  }
  
  .cart__checkout{
    padding-top: 20px;
    
  }
  
  .cart__checkoutButton{
    font-weight: bold;
    text-transform: uppercase;
    background-color: #ffd500;
    border-style: none;
    border-radius: 25px;
  }
  
  .cancelIcon{
    background: url('https://cdn.shopify.com/s/files/1/0306/6557/2492/files/cancel.png?v=1605348792');
    height: 40px;
    width: 40px;
  }

  .px-1 {
    padding-left: 5px;
    padding-right: 5px;
  }

  .f-1 {
    flex: 1; 
  }

  .f-2 {
    flex: 2; 
  }

  .f-3 {
    flex: 3; 
  }
  
  .f-4 {
    flex: 4; 
  }
  .f-5 {
    flex: 5; 
  }
  
  .fs-12 {
    font-size: 12px; 
  }
  
  .fs-14 {
    font-size: 14px; 
  }
  
  .fs-20 {
    font-size: 20px; 
  }

  .fw-b {
    font-weight: bold; 
  }
  
  .fc-g {
    color: #adadad; 
  }
  
  .middle{
  margin-top: auto;
  margin-bottom: auto;
  }
  
  .ta-r {
    text-align: right; 
  }
  
  .ta-l {
    text-align: left; 
  }
  
  .td-o{
    text-decoration: line-through; 
  }
  
  .pb-10 {
    padding-bottom: 10px;; 
  }
  
  .pb-30 {
    padding-bottom: 30px;; 
  }
  
  .tt-u {
    text-transform: uppercase; 
  }

  .red {
    color: #FF0102;
  }
}


@media screen and (max-width: 992px) {
  .b_cart {
    display: block;

    .cart__summary {
      margin-top: 25px;
      padding: 0px;
      border: none;
    }
    
    .cart__row {
      padding: 0px;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    
    .cart__header{
        display: none;
    }
    
    .cart__items {
    padding: 0px;
  }
    
    .cart__productImage{
        flex: 4;
    
    }
    
    .cart__productTitle{
   flex: 8; 
  }
    
  }
}