无法让div在移动视图中水平堆叠并100%显示屏幕，同时在桌面中保持3个并排

/* 移动视图样式 */
@media screen and (max-width: 767px) {
  .div-class {
    width: 100%;
  }
}

/* 桌面视图样式 */
@media screen and (min-width: 768px) {
  .div-class {
    width: 33.33%;
  }
}

<div class="parent-container">
  <div class="div-class">Div 1</div>
  <div class="div-class">Div 2</div>
  <div class="div-class">Div 3</div>
</div>

.parent-container {
  display: flex;
}

.div-class {
  flex: 1;
}