Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

2

Answers


  1. 0 
        .container {display: flex; width:100%;}
. col1 {width: 50%; background-color: #ccc;}
. col2 {background-color: red;}
. col3 {background-color: yellow;}

    
    <div class="container">
    <div class="col1">Content = image</div>
<div class = "container-right">
    <div class="col2">Content = text</div>
    <div class="col3">Content = text</div>
</div>
</div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search