不幸的是，我不能使整个酒吧垂直而不是以任何方式水平。这是代码:

null

.progress2 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 4px;
  border-radius: 10px;
  transform: translate(-50%);
  overflow: hidden;
}

.bar__fill {
  display: block;
  background: #FFAD0D;
  height: 100%;
  transition: width .5s ease-in-out;
}

.bullet {
  position: relative;
  display: flex;
  justify-content: center;
  font-family: OpenSans-Bold;
  font-size: 12px;
  color: #FFAD0D;
  width: 24px;
  height: 24px;
  background-color: white;
  border-style: solid;
  border-color: #FFAD0D;
  border-radius: 50%;
  z-index: 2;
}

.bullet .point--active & {
  background-color: #FFAD0D;
  color: white;
}

<div class="progress">
  <div class="bar">
    <div class="bar__fill" style="width:33%;"></div>
  </div>
  <div class="point point--complete point--active">
    <div class="bullet">1</div>
  </div>

  <div class="point">
    <div class="bullet">2</div>
  </div>

  <div class="point">
    <div class="bullet">3</div>
  </div>

  <div class="point">
    <div class="bullet">4</div>
  </div>

  <div class="point">
    <div class="bullet">5</div>
  </div>

</div>

null

我想把数字和navbar.bar放在一个垂直的位置，而不是一个水平的位置。谢谢你的帮助！