hikozuma hikozuma - 4 months ago 5
HTML Question

Switch one sandwich column and two columns in responsive

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

enter image description here

Two columns image

enter image description here

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
enter image description here

Narrow to show smartphone screen

enter image description here

Re-large to show PC screen, but each column is not side by side.
enter image description here

Answer

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