Switch one sandwich column and two columns in responsive - css

Question

I tried switching one sandwich column and two columns by using flex. However, I could not do it without using two div tags and display: none;
Could you please give me any advice?
One column image
Two columns image
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;
}
}
These images are added July 28.
Initial screen
Narrow to show smartphone screen
Re-large to show PC screen, but each column is not side by side.

Answer 1

Just switch from columns to wrapping rows....
.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

Here's another option: 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;
}
}
Good luck!