Moving a flex item from inside a column of items to its own column

Question

If I have a flex container with three children with flex-direction: column, and I want to move the middle child to the right while keeping the first and third child to the left, how would I do that?

Is flexbox even the correct approach or is something else more appropriate?

This is my attempt:

.container {
  display: flex;
  flex-flow: row wrap;
  @media (max-width: 840px) {
    flex-flow: column wrap;
  }
}
.red,
.green,
.blue {
  width: 50%;
  @media (max-width: 840px) {
    width: 100%;
  }
}
.red {
  background-color: red;
  height: 100px;
}
.green {
  background-color: green;
  height: 300px;
}
.blue {
  background-color: blue;
  height: 100px;
}

<div class="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

http://codepen.io/dye/pen/mOeZma

It's close, but not quite there. When green div moves to the right, there's a big gap between red and blue.

Any advice would be appreciated. Thank you!

Answer 1

Let me start by saying I like flexbox. It can take some time to get your head around all the little things it can do.

If I understood the question I think this does what you want (you'll need to press the full-screen button to see it in all it's glory, as I included the less that 840px stuff).

body {
  margin: 0
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 400px
}
.blue,
.green,
.red {
  width: 50vw
}
.red {
  height: 100px;
  background: red
}
.green {
  height: 200px;
  order: 1;
  background: green
}
.blue {
  background: #00f;
  height: 300px
}
@media (max-width: 840px) {
  .container {
    height: auto
  }
  .blue,
  .green,
  .red {
    width: 100vw
  }
  .green {
    order: 0
  }
}

<div class="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

I've manually set the height of the container to trigger the wrapping, and I've giving green a positive order so it's at the bottom of the list. Though when it's small and all in one column I've taken the order away so it is in the middle again.

I hope this helps, and never give up on flexbox ;-)