在移动设备上-水平视图画廊比垂直视图更好

Question

我在手机上的画廊在垂直位置看上去比在水平位置上差很多。

  .order-gallery ul li {
  display: inline;
}

.order-gallery ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  list-style-type: none;
  text-align: center;
  padding: 0;
}

.order-gallery li {
  flex: 1 33%;
  padding: 0 20px;
}

.order-gallery li img {
  max-width: 100%;
}

.panel-body {
  background: rgba(21, 21, 21, 0.5);
  padding: 15px;

<div class="panel-body order-gallery">
  <ul>
    <li>
      <img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
    </li>
    <li>
      <img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
    </li>
    <li>
      <img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
    </li>
    <li>
      <img pp-type="imagemodal" pp-imagemodal-src="https://placehold.it/600x400" src="https://placehold.it/200x100">
    </li>
  </ul>
</div>

水平视图：https://imgur.com/a/1XrZ07K

垂直视图：https://imgur.com/a/YRD7siT