Writing flexbox code for 2-column and 3-column on desktop and mobile (wrap)

Question

I\'m having a real hard time figuring out this CSS flexbox solution. Basically there are 2 issues, one with a 2-column and another with a 3-column layout.

2-Column:

Answer 1

Here's how you do it for the three columns. I'm only adding that, because it's a bit more tricky:

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

.left {
  order: 1;
  background: red;
  flex-basis: 100%;
  height: 300px
}

.middle {
  order: 3;
  background: green;
  flex-basis: 100%;
  height: 300px;
}

.right {
  order: 2;
  background: yellow;
  flex-basis: 100%;
  height: 300px;
}

@media screen and (min-width:600px) {
  .container {
    flex-wrap: nowrap;
  }
  .left {
    flex-basis: 200px;
    order: 1;
  }
  .middle {
    flex-basis: 1;
    order: 2;
  }
  .right {
    flex-basis: 200px;
    order: 3;
  }
}

And the fiddle http://jsfiddle.net/2touox81/

As you can see, you can set column order for flex items.

Hope this helps.