<div class="contenedor"> <div class="div1"> <h2>División 1</h2> <p>Texto de la división 1</p> </div> <div class="div2"> <h2>División 2</h2> <p>Texto de la división 2</p> </div> </div> Quiero que pase de columnas a filas cuando cambie el tamaño de la pantalla

SS
.contenedor {
  width: 250px;
  height: 150px;
  background: green;
  display:flex;
  flex-direction: column;
}

.div1{
  background: black;
  color: white;
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}

.div2{
  background: #ffdd59;
  color: black;
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}

@media screen and (max-width: 320px) {
  .contenedor {
    flex-direction: row;
  }
}