Я установил flexbox с двумя элементами, которые должны быть слева и справа на обычном экране.

Если экран недостаточно велик, чтобы показать оба рядом друг с другом, он должен быть перенесен, но тогда они должны быть центрированы, а не выровнены по левому краю.

Я пробовал разные решения (например, использованиеmargin: auto на дочерние элементы), но это выровняло их больше к центру, даже когда в том же ряду.

Вот упрощенный пример:

.container {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}
.large {
  width: 500px;
}
.small {
  width: 175px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 25px 0px;
}

<div class="container large">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container small">
  <div class="item"></div>
  <div class="item"></div>
</div>

https://jsfiddle.net/SoWhy/zfx4ub8x/

Первый контейнер предназначен для позиционирования, второй контейнер эмулирует тот же контейнер на меньшем экране, обратите внимание на выравнивание по левому краю.

Есть ли способ определить, что flexbox должен по-разному выравнивать элементы при переносе, или я могу сделать это только с помощью метода "@media screen" (который требует от меня установки определенного размера и, следовательно, не является гибким, если размер элементов изменения)?