サンドイッチカラムと2カラムを応答して切り替えます

Question

フレックスを使用してサンドイッチカラムと2カラムを切り替えてみました。しかし、2つのdivタグを使用せずに表示することはできませんでした。 私に助言をくれませんか？

1枚の列画像

二列画像

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; 
    } 
} 

幸運！