html/css responsive 3-column layout - stack right column below left column

Question

I\'m trying to get the right column of a 3 column layout to move below the left column on smaller screens. Right now the right column moves in the correct direction except t

Answer 1

You can't accomplish that with Flexbox, unless setting fixed height's all over.

Here is a solution that combine Flexbox with float, and use a media query to swap between the two, when on narrower screens.

Note, when using percent based width combined with fixed margins, it can at some point cause the item to wrap. Use CSS Calc to avoid that, as showed in the answer.

Stack snippet

.container {
  max-width: 1280px;
  height: 200px;
  margin: 0 auto;
  display: flex;
}

.leftsidebar, .rightsidebar {
  width: 20%;
  background-color: gray;
  margin-top: 15px;
}
.rightsidebar {
  background-color: orange;
  clear: left;
}

.middle {
  width: calc(60% - 30px);          /*  calc for margin  */
  background-color: blue;
  margin: 15px 15px 0 15px;
  height: 800px;
}

@media (max-width: 600px) {
  .container {
    display: block;
  }
  .leftsidebar, .rightsidebar {
    height: 200px;
    float: left;
  }
  .middle {
    width: calc(80% - 30px);          /*  calc for margin  */
    float: right;
  }
}

  
left 
  
middle 
  
right