box-direction：親ボックス内に配置する子要素の表示方向を指定する

box-directionプロパティの説明

box-directionは、親ボックス内に含まれる子要素が並ぶ際に、左から右へ、または上から下へ配置するか、その逆に、右から左へ、または下から上へ配置するかを指定するために使用します。このプロパティは、フレキシブルボックス（flexbox）レイアウトモジュールの旧バージョンのため、実装する場合はflex-directionに移行してください。

box-directionに与えられる値

normal

左端、または上端を開始位置として配置する（初期値）

reverse

右端、または下端を開始位置として配置する

box-directionの使用サンプル

.box_sample {
 display:-moz-box;
 display:-webkit-box;
 display:-o-box;
 display:-ms-box;
 padding: 3px;
 margin: 0 0 50px 0;
 border: 1px solid #333333;
}
.dir_normal_h {
 box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-orient: horizontal;
  -o-box-orient: horizontal;
  -ms-box-orient: horizontal;
 box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-direction: normal;
  -o-box-direction: normal;
  -ms-box-direction: normal;
}
.dir_reverse_h {
 box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-orient: horizontal;
  -o-box-orient: horizontal;
  -ms-box-orient: horizontal;
 box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-box-direction: reverse;
  -o-box-direction: reverse;
  -ms-box-direction: reverse;
}
.dir_normal_v {
 box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  -o-box-orient: vertical;
  -ms-box-orient: vertical;
 box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-direction: normal;
  -o-box-direction: normal;
  -ms-box-direction: normal;
}
.dir_reverse_v {
 box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  -o-box-orient: vertical;
  -ms-box-orient: vertical;
 box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-box-direction: reverse;
  -o-box-direction: reverse;
  -ms-box-direction: reverse;
}

<div class="box_sample dir_normal_h">
horizontal normal
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
</div>

<div class="box_sample dir_reverse_h">
horizontal reverse
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
</div>

<div class="box_sample dir_normal_v">
vertical normal
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
</div>

<div class="box_sample dir_reverse_v">
vertical reverse
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
</div>