如何制作一个按钮列表，在手机上显示两列？

<ul class="button-list">
  <li><button>Button 1</button></li>
  <li><button>Button 2</button></li>
  <li><button>Button 3</button></li>
  <li><button>Button 4</button></li>
  <li><button>Button 5</button></li>
  <li><button>Button 6</button></li>
  <!-- 添加更多按钮 -->
</ul>

.button-list {
  display: flex;
  flex-wrap: wrap;
}

.button-list li {
  width: 50%;
  /* 添加其他样式 */
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .button-list li {
    width: 100%; /* 在较小的屏幕上显示为单列 */
  }
}