CSSを使ってbox1,box2,box3を横並びにしてbox1の隣にbox3を持ってきたい

すいません質問があります。

CSSを使ってbox1,box2,box3を横並びにしてbox1の隣にbox3を持ってきたい

下記のソースコードは、

<div class="boxContainer">
<div class="box">BOX1</div>
<div class="box">BOX2</div>
<div class="box">BOX3</div>
</div>

BOX1
BOX2
BOX3

このように出力されます。
それを

BOX1BOX3
BOX2

このように、BOX1の隣にBOX3を持ってくるにはどうしたらよいかアドバイスをください。

display:flex; を調べて試してみたのですが、

BOX1BOX2BOX3

このような形は出来ますが、1と3を並べるのは出来ませんでした。

よろしくお願いいたします。

No.2 回答者： bx2 回答日時： 2017/07/02 17:59

div.boxContainer {

position: relative;
}

div.box:nth-of-type(3) {
position: absolute;
top: 0;
right: 0;
}

http://www.htmq.com/style/position.shtml

No.1 回答者： torayoshi 回答日時： 2017/07/02 14:19

<div class="boxContainer">

<span class="box">BOX1</span><span class="box">BOX3</span>
<div class="box">BOX2</div>
</div>