htmlcssflexbox

3rd column below the 2nd and move to below the 1st

I'm trying to do this : enter image description here

I try flex but I can't find the solution.

.container {display:flex; flex-wrap: wrap;}
.col1 {width: 50%; background-color: #ccc;}
.col2 {width: 50%; background-color: red;}
.col3 {width: 50%; background-color: yellow;}
/*@media screen and (max-width: 1024px) {
.col3 {width: 100%;}
}*/
<div class="container">
    <div class="col1">Content = image</div>
    <div class="col2">Content = text</div>
    <div class="col3">Content = text</div>
</div>

Solution

  • What you're looking for can be done by using display: grid and specify areas. You can change the areas inside of your media query:

    .container {
  display: grid;
  grid-template-areas: "one two"
    "one three";
}

.col-1 {
  background: red;
  grid-area: one;
}

.col-2 {
  background: green;
  grid-area: two;
}

.col-3 {
  background: lightblue;
  grid-area: three;
}

@media screen and (max-width: 1024px) {
  .container {
    grid-template-areas: "one two"
      "three three";
  }
}
    <div class="container">
  <div class="col-1">One</div>
  <div class="col-2">Two</div>
  <div class="col-3">Three</div>
</div>