Flex-box укладывает последний элемент в строке ниже остальных при ширине мобильного

Question

У меня есть строка flex-box, которая содержит три контейнера div. Я бы хотел, чтобы последний контейнер div укладывался ниже других контейнеров при достижении определенной ширины (мобильный).

Хотите выполнить sh, используя flex-box:

HTML:

<div class="cart_item">
    <div class="cart_image"><img src="https://i.imgur.com/01RSUK6.jpg"></div>
    <div class="cart_item_details">
        <div class="item_title">
            <p>Item Title: Cute Fox</p>
        </div>
    </div>
    <div class="cart_item_price">
        <div class="price"> Price: $8.99</div>
    </div>
</div>

CSS:

img {
  max-width: 100%  
}

.cart_item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    overflow: hidden;
    border: 1px solid #404040;
    padding: 15px;
}

.cart_image {
    width: 50px;
    margin-right: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.cart_item_details {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 50%;
    margin-right: 15px;
    color: #0a0918;
    line-height: 1.7em;
}

.cart_item_price {
    text-align: right;
}

Я не смог достичь желаемого результата.

Вот скрипка: JS Скрипка

Спасибо за помощь!

Answer 1

Добавьте следующие правила:

@media only screen and (max-width: 600px) {
  .cart_item {
    flex-flow: row wrap;
  }
  .cart_item_price {
    flex-basis: 100%;
  }
}