CSS, 3x2 grid, how can I have the last column seperate to first 2 but all cells to be same ratios?-CodePudding

I have 6 cells in a 3x2 grid.

I have the following html

.wrapper {
  margin: 2px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  border:1px solid #000;/* only for showing here */
  min-height:20px;/* only for showing here */
}

<div class='wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='1'>
      </div>
    </div>
    <div class='column'>
      <div class='2'>
      </div>
    </div>
    <div class='column'>
      <div class='3'>
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='column'>
      <div class='4'>
      </div>
    </div>
    <div class='column'>
      <div class='5'>
      </div>
    </div>
    <div class='column'>
      <div class='6'>
      </div>
    </div>
  </div>
</div>

This creates a 3x2 grid.

However what I want is on smaller screens the end column to be under the first 2 columns. Then what I did is create 1 column which is 66.6% width and another column which is 33.3% width. In the first column created 2 rows with another columns in each row. And in the second column created 2 rows with 1 column in each row.

Now I have a 3x2 grid which on mobile puts the end column after the first 2 columns. However the columns in the first 2 columns (66.6%) are equal but the 3rd (33.3%) is a different height to the first as they are now seperate columns.

How can I make the divs in the end colum the same height as the divs in the first? Thanks

Edit Have added image as an example

Example

CodePudding user response：

You have 6 cells and for the mobile view you can use order property.

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.wrapper> div {
  border:1px solid #000;/* only for showing here */
  min-height:20px;/* only for showing here */
}
@media all and (min-width: 401px) {

    .wrapper> div {
        width: 33%;
    }
}

@media all and (max-width: 400px) {
    .wrapper> div {
        width: 100%;    
    }
    .cell1 {
        order: 0;
    }
    .cell2 {
        order: 1;
    }
    .cell3 {
        order: 4;
    }
    .cell4 {
        order: 2;
    }
    .cell5 {
        order: 3;
    }
    .cell6 {
        order: 5;
    }   
}

<div class='wrapper'>
    
      <div class='cell1'>1</div>
      <div class='cell2'>2</div>
      <div class='cell3'>3</div>
      <div class='cell4'>4</div>
      <div class='cell5'>5</div>
      <div class='cell6'>6</div>

</div>