flex-wrapのデフォルト状態で要素が下がってしまう。

Question

レスポンスで縮めると以下のような順番で配置されることを目標としてます。

元の配置は以下の緑の部分に青があったのですが、flex-wrap: wrap-reverse;を入れると青がなぜか画像のように下がってしまいます。
青のブロックを緑の位置に持っていきたいのですが、どうしたらよいですか?
自分ではpadding-bottomでかさを増すしか出来ませんでした。

<div class="wrap">
    <div class="left">
    </div>
    <div class="right">
    </div>
  </div>

.wrap {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap-reverse;
}
.left {
  width:100px;
  height: 500px;
  background-color: red;
}
.right {
  width:100px;
  height: 100px;
  background-color: blue;
}

Answer 1

実際のコードでrightにheight:500px;が入っていたので、おかしくなっていました。