在響應中切換一個夾層列和兩列

Question

我嘗試使用flex切換一個夾層列和兩列。但是，我不能使用兩個div標籤並顯示：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; 
    } 
} 

祝你好運！