Making the cart design mobile compatible as desired - html

Question

I am a junior developer and I am trying to create a cart page design for a store.
As you can see in the screenshots, I have completed the majority in desktop design.
The design I have to do: https://gyazo.com/2de152ba832ad4fafffa78d6900c6a67
The design I made: https://gyazo.com/ad387f7c61db2c355765ceaec1f29983
But I cannot create the desired structure in mobile design.
The design I have to do: https://gyazo.com/849bbb190fc312460c16254a322b5d0f
The design I made: https://gyazo.com/5569721f101b34f3530fcbe368fce5fd
How can I code the mobile design as desired?
You can also check it from the link.
https://bee-and-you-development.myshopify.com/cart
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"><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=""></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>
Weiter einkaufen
</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>
SASS
.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;
}
}
}
I would appreciate it if you could support, thank you.