切换一个三明治柱和两列响应

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

Answer 2

这是另一种选择：http://codepen.io/panchroma/pen/LkALXG/

HTML

<div class="container">
  <div class="timezone">timezone1</div>
  <div class="menu">menu1</div>

  <div class="timezone">timezone2</div>
  <div class="menu">menu2</div>

  <div class="timezone">timezone3</div>
  <div class="menu">menu3</div>

</div>  

CSS

.timezone,
.menu{
  width:50vw;
  display:inline-block;
}

.menu{
  float:right;
} 

@media screen and (max-width: 767px){
  .menu,
  .timezone{
   float:none;
   display:block; 
   width:auto;
  }
}

祝你好运！