Центрируйте гибкие элементы при переносе (без медиазапросов), тогда как они начинаются с выравнивания между пробелами

Question

Ниже вы увидите, что у меня есть. Когда он оборачивается с отзывчивостью, я бы выровнял по центру поля .image и .content. Важно держать .image слева и .content справа в большем окне просмотра.

Есть идеи?

.container{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.image{
  width: 200px;
  height: 50px;
  background-color: orange;
}

.content{}

.list{
  display:flex;
}

<div class="container">
<div class="image">
Image
</div>
<div class="content">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>

Answer 1

Вы можете добавить это css для мобильных устройств

@media (max-width: 768px) {
   .container {
      justify-content: center;
    }
}

Answer 2

Вы можете использовать медиа-запрос для достижения отзывчивости

@media (max-width: 767px) {
   .container {
      flex-direction: column;
      align-items: center;
    }
}