Flexbox包装无法按预期工作

Question

我有一组看起来像按钮的圆形div，它们由flexbox包装。我试图做的是，当设备没有太多高度时，div会重新排序到页面中......但是会发生的是他们重新排序页面（以及＆＃39; .generalsidebar＆＃39; background属性显示错误）

总结一下，当设备的高度不高时，div必须在页面内重新排序，背景颜色＃55acee必须包装它们。

这是HTML和CSS

＆＃13;

＆＃13;

.generalsidebar {
  background: #55acee;
  height: 100vh;
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
}
.generalQuestionNumber {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 1px solid #fff;
  padding: 15px;
  text-align: center;
  margin: 12px;
  font-size: 20px;
}

＆＃13;

<div class="generalsidebar">
  <div class="generalQuestionNumber">1</div>
  <div class="generalQuestionNumber">2</div>
  <div class="generalQuestionNumber">3</div>
  <div class="generalQuestionNumber">4</div>
  <div class="generalQuestionNumber">5</div>
  <div class="generalQuestionNumber">6</div>
  <div class="generalQuestionNumber">7</div>
  <div class="generalQuestionNumber">8</div>
  <div class="generalQuestionNumber">9</div>
  <div class="generalQuestionNumber">10</div>
  <div class="generalQuestionNumber">11</div>
</div>

＆＃13;

＆＃13;

＆＃13;