Placing container with flex order for different views

Question

I want to build with flex the following structure as a desktop first build:

In desktop view i need to place Container 1 and Container 2 side by side with the same height (use the height of the heighest content) and container 2 contains two content boxes.

But in mobile the overall order should be different as seen in the image. The problem i have here is the Container 2 im using here making it difficult to rearange the content as needed for mobile views.

Here is some of my code:

  <div class="content-wrapper">
    <div class="container-1" >
      Content 1
    </div>
    <div class="container-2">
       <div class="content-2">
         Content 2
        </div>
        <div class="content-3">
         Content 3
        </div>
    </div>
  </div>

.content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

 @media only screen and (max-width: 900px) {
    flex-direction: row;
  }
  .container-1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    order: 2;
    justify-content: center;

    @media only screen and (max-width: 900px) {

      order: 1;
     }
   }
   .container-2{
    // height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    order: 1;
    width: 50%;

     @media only screen and (max-width: 900px) {

      order: 2
     }

     .content-2 {
       height: 70%;
      }

     .content-3 {
       height: 30%;
      }

   }
 }

Maybe someone can help me out here how to build this different views with flex (if you can provide a good grid solution im also happy with this)

score 1 · Answer 1 · answered Apr 12 '22 at 09:46

IMHO the easiest way would be the use of CSS-Grid which controls both horizontal and vertical axis at the same time. For that you dont need wrappers and can simply use grid-template-areas:

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

@media only screen
  and (max-width: 900px) {
    .grid {
      grid-template-areas:
        "two"
        "one"
        "three";
      }
}

.grid :nth-child(1) {
  grid-area: one;
}

.grid :nth-child(2) {
  grid-area: two;
}

.grid :nth-child(3) {
  grid-area: three;
}



/* for demonstration purpose only */
body {
  margin: 0;
}

.grid {
  grid-gap: 2px;
  height: 100vh;
  padding: 2px;
  box-sizing: border-box;
}

.grid > div {
  box-shadow: 0 0 0 2px black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Thank you this is working for me with grid! Im just wondering if it is possible with pure flex too because its not 100% clear if i need to support the ie11 and the shitty ie11 lacks the grid support. But i guess im fine with not supporting ie11 anymore — Alex, Apr 12 '22 at 12:01

score 0 · Answer 2 · answered Apr 12 '22 at 09:49

I try this with flex grid with your desktop view and display flex with your mobile view:

.content-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-auto-rows: 70% 30%;
     height: 100%;
     width: 100%;
}
.content-wrapper * {
  border: solid 1px;
}
 .content-wrapper .content-1 {
   grid-row: 1/3;
   grid-column: 1/2;
     display: flex;
     flex-direction: column;
     justify-content: center;
}
 .content-wrapper .content-2 {
   display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
}
.content-wrapper .content-2 {
   grid-column: 2/3;
   grid-row: 1/2;
}
 .content-wrapper .content-3 {
   grid-column: 2/3;
   grid-row: 2/3;
}
@media only screen and (max-width: 900px)
{
  .content-wrapper {
    display: flex;
    flex-direction: column;
  }
  .content-2 {
    order: -1;
  }
}
 
   </style>
  <div class="content-wrapper">
      <div class="content-1" >
        Content 1
      </div>
      <div class="content-2">
        Content 2
      </div>
      <div class="content-3">
        Content 3
      </div>
    </div>
</style>

I also change your html.

score -1 · Answer 3 · answered Apr 12 '22 at 09:41

You can try like this:

.container-1 {
        width: 50%;
        display: flex;
        flex-direction: column;
        order: 2;
        justify-content: center;
    }

    @media only screen and (max-width: 900px) {
        .container-1 {
            order: 2;
        }
    }

    .container-2 {
        height: 100vh;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        order: 1;
        width: 50%;
    }

    @media only screen and (max-width: 900px) {
        .container-2 {
            order: 1
        }
    }

Placing container with flex order for different views

3 Answers3