フレックスアイテムを並べる方向を指定します。フレックスボックスについての概要は flex を参照してください。

.flexbox {
  display: flex;
  display: -ms-flexbox;
  margin: 10px;
  padding: 10px;
  border: 1px solid #999;
  background-color: #ddd;
}
.flex-row {
  -webkit-flex-direction: row;
          flex-direction: row;
}
.flex-row-reverse {
  -webkit-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.flex-column {
  -webkit-flex-direction: column;
          flex-direction: column;
}
.flex-column-reverse {
  -webkit-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
.boxA, .boxB, .boxC {
  border: 1px solid #999;
  width: 100px;
  text-align: center;
}
.boxA { background-color: #fcc; }
.boxB { background-color: #cfc; }
.boxC { background-color: #ccf; }

<h5>row</h5>
<div class="flexbox flex-row">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>

<h5>row-reverse</h5>
<div class="flexbox flex-row-reverse">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>

<h5>column</h5>
<div class="flexbox flex-column">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>

<h5>column-reverse</h5>
<div class="flexbox flex-column-reverse">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>

• http://www.w3.org/TR/css-flexbox-1/#flex-direction-property
• https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction
• http://caniuse.com/#feat=flexbox