margin-top uniquement lorsque l'élément flexible est enveloppé

J'ai un conteneur flexible avec deux éléments flexibles. Je veux définir une marge supérieure sur le second, mais uniquement lorsqu'il est enveloppé et non à la première ligne flexible.

Si possible, je souhaite éviter d'utiliser les requêtes multimédias.

Je pensais que la marge inférieure sur le premier élément pourrait être une solution. Cependant, cela ajoute de l'espace en bas lorsque les éléments ne sont pas enveloppés, donc même problème.

Voici mon code:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item-big {
  background: blue;
  width: 300px;
}
.item-small {
  background: red;
  margin-top: 30px;
}

<div class="container">
  <div class="item-big">
    FIRST BIG ELEM
  </div>
  <div class="item-small">
    SECOND SMALL ELEM
  </div>
</div>

Vous pouvez en ajouter margin-topaux deux éléments flexibles et un négatif margin-topdu même montant au conteneur flexible.

De cette façon, la marge négative du conteneur flexible neutralisera la marge des éléments flexibles à la première ligne, mais pas la marge des éléments enveloppés dans d'autres lignes.

.container {
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
  background: red;
}
.item-big {
  background: blue;
  width: 300px;
}

<div class="container">
   <div class="item-big">
      FIRST BIG ELEM
   </div>
   <div class="item-small">
      SECOND SMALL ELEM
   </div>
</div>