display:flex

横並びにしたい要素にdisplay:flexを指定すると、その子要素が並列になります。

簡単に導入するならば、CSSで「display:flex」というスタイルを指定するだけです。

■html

    
1番目
    
2番目
    
3番目

■css
.flexBox {
    display: -webkit-flex;
    display: flex;
}　

また、上下左右中央寄せは

.flexBox {
    display: -webkit-flex;
    display: flex;
　　justify-content: center;
　　align-items: center;
}

で指定します。

横並びにするならば、inline-blockやfloatなど選択肢はありますが、
flex-directionプロパティを使うと、HTMLはそのまま要素の順番の変更が可能です。

.flexBox {
     display: -webkit-flex;
    display: flex;
}
.flexBox li:nth-child(3) {
     -webkit-order: -1;
    order: -1;
}