css - 在响应式中切换一个夹心列和两个列

Question

我尝试使用 flex 切换一个三明治列和两个列。但是，如果不使用两个 div 标签和 display: none; 我就无法做到这一点。 你能给我一些建议吗？

一栏图片

两列图像

HTML

   <div class="container">
 <div class="category1">
   <div class="timezone1">timezone1</div>
   <div class="menu1">menu1</div>
   <div class="timezone2">timezone2</div>
   <div class="menu2">menu2</div>
   <div class="timezone3">timezone3</div>
   <div class="menu3">menu3</div>
 </div>
</div>

<div class="pc-container">
 <div class="pc-category1">
   <div class="pc-timezone1">timezone1</div>
   <div class="pc-timezone2">timezone2</div>
   <div class="pc-timezone3">timezone3</div>
 </div>
 <div class="pc-category2">
   <div class="pc-menu1">menu1</div>
   <div class="pc-menu2">menu2</div>
   <div class="pc-menu3">menu3</div>
 </div>
</div>

CSS

.container {
    display: flex;
    flex-flow: column wrap;
}

.pc-container {
    display: none;
}

@media screen and (min-width: 768px){

  .container {
    display: none;
  }

  .pc-container {
    display: flex;
    flex-flow: row wrap;
  }
}

这些图像是在 7 月 28 日添加的。

初始画面

缩小以显示智能手机屏幕

重新放大以显示 PC 屏幕，但每一列都不是并排的。

Answer 1

只需从列切换到换行....

.category1 {
  display: inline-flex;
  border: 1px solid grey;
  padding: .5em;
  flex-direction: column;
}
@media screen and (min-width: 500px) {
  .category1 {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .category1 > div {
    white-space: nowrap;
    flex: 0 1 50%;
  }
  .category1 > [class^="menu"] {
    text-align: right;
  }
}

<div class="container">
  <div class="category1">
    <div class="timezone1">timezone1</div>
    <div class="menu1">menu1</div>
    <div class="timezone2">timezone2</div>
    <div class="menu2">menu2</div>
    <div class="timezone3">timezone3</div>
    <div class="menu3">menu3</div>
  </div>
</div>

Codepen Demo