Flexbox: Change direction after wrapping

Question

I am using Flexbox to layout some items in a HTML-page, without problems.

On a wide display it looks like this:

This is okay. And on a small display (on a mobile device) it looks like this:

This is also okay. But when I resize and go from wide to small (medium display width), it looks like this:

This is NOT okay.

Of course it looks like this...the elements move downwards (wrap) one by one. But I do not want that. If there is not enough space to have them all three on a row, I want to have them all three in a column... always. (Like in the 2nd image.)

Is this possible with flexbox? Maybe with 'order', but how does that work? Or do I need media queries for that? (I prefer CSS over JavaScript/JQuery)

This is the code:

.score-container {
  border: 1px solid blue;
  background-color: #EEE;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
div.score-container span {
  border: 1px solid #F00;
  background-color: #FF0;
  padding: 5px;
}
div.score-names {
  border: 1px solid green;
  background-color: #BBB;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  flex-basis: auto;
  align-items: baseline;
}
div.score-names span {
  border: 1px solid red;
  background-color: #FF0;
  padding: 5px;
}
span.score-home, span.score-away {
  width: 250px;
  text-align: center;
}
span.score-score, span.score-label, span.score-action {
  min-width: 50px;
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
}
span.score-score {
  margin: 5px;
}

<div class="score-container">
  <span class="score-label">Match 01</span>
  <div class="score-names">
    <span class="score-home">Player 1</span>
    <span class="score-score">1 - 0</span>
    <span class="score-away">Player 2</span>
  </div>
  <span class="score-action">Change</span>
</div>

And this is the fiddle: http://jsfiddle.net/RWCH/xgpgquk5/

Answer 1

One option would be to set flex-basis to 100% on the left/right elements.

As you suggested, media queries are probably the way to go. Since the widths are likely dynamic, the hard part is determining the media query break point to place this CSS in.

Updated Example

@media (max-width: 750px) {
    span.score-home, span.score-away {
        flex-basis: 100%;
    }
}