CSS responsive changing flex layout

Question

I would like to create this CSS layout: https://imgur.com/Nj1TzmN

For PC version: There is one big column (1) and second big column containing (2), (3), (4) as rows.

For mobile version: There are three rows and first row is divided to two (1), (2) and row two contains (3) and row three contains (4).

Here is my test: https://codepen.io/vanicf01/pen/KKwKWpq

HTML code here:

<div class="flexbox">
  <div class="one item">1</div>
  <div class="two item">2</div>
  <div class="three item">3</div>
  <div class="four item">4</div>
</div>

CSS code here:

.flexbox {
  display: flex;
  width: 300px;
}

.item:nth-of-type(1) { flex-grow: 3; }
.item:nth-of-type(2) { flex-grow: 1; }
.item:nth-of-type(3) { flex-grow: 1; }
.item:nth-of-type(4) { flex-grow: 1; }

.one {
  background-color: red;
  flex-grow: 3;
}

.two {
  background-color: blue;
}

.three {
  background-color: green;
}

.four {
  background-color: yellow;
}

.item {
  padding: 10px;
}

Is it possible to create this layout?

score 1 · Accepted Answer · answered Dec 02 '19 at 15:01

try this : HTML :

<div class="flex-container">
  <div class="flex-container__first">
    1
  </div>
  <div class="flexbox">
  <div class="flex-mobile">
     <div class="one item">1</div>
    <div class="two item">2</div>
  </div>  
  <div class="three item">3</div>
  <div class="four item">4</div>
</div>
</div>

CSS :

.flex-container{
  display: inline-flex;
  background:pink;
}
.flex-container__first{
  min-width:50%;
  align-self: center;
  @media (max-width: 600px) {
    display: none;
  }
}
.flexbox {
  display: flex;
  flex-direction:column;
  width: 300px;
  flex-wrap:wrap;
}

.flex-mobile{
  display:inline-flex;
  width:100%;
}

.one {
  background-color: red;
  width:100%;
   @media (min-width: 600px) {
    display: none;
  }
}

.two {
  background-color: blue;
  width:100%;
}

.three {
  background-color: green;
}

.four {
  background-color: yellow;
}

.item {
  padding: 10px;
}

Code Pen : https://codepen.io/abdelhedi/pen/bGNGREP

CSS responsive changing flex layout

1 Answers1