Flexbox - move middle element to the next line (without media query)

Question

What I want to achieve (but without the media query):

JsFiddle

@media all and (max-width: 600px) {
  #wrapper {
    flex-wrap:wrap;
    height: 100px;
  }

  .center {
    width: 100%;
    order: 3;
  }

  .left{
    width: 50%;
  }

  .right {
    width:50%;
    order:2;
  }
}

I have 3 elements inside a wrapper, all shrinked. At desktop size, there is some space left over, however when I resize my window to a smaller dimension, at some point, elements run out of space. When that happens, I want to put the middle element to the next line. I have a solution, where the third element goes to the next line, and JSFiddle solution, where the second element goes to the next line, but always at the same static width.

So is it possible to put the middle element to the next line, when all three shrinked elements run out of space?

Answer 1

You can definitely wrap the line without media queries by using flex-wrap, flex-grow, flex-shrink and flex-basis to specify a minimum width that any given item should have:

#wrapper{
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
}

.right{
  width: 20%;
  background-color: blue;
  order: 3;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 200px;
}

But it's not possible to change the flex-order based solely on whether the elements "fit". For that you definitely need a media query.