複雑な位置決め要素（行を掛ける）

Question

すべて

がどのように画面サイズを変更するときに、要素の一部が複数の行に配置したように、要素をプログラムを教え、およびその他 - 行の

2例： https://s13.postimg.org/pswl5sfjr/example.png

HTMLの例： https://jsfiddle.net/ehuoy97d/

<div class = "menu"> 
    <div class = "menu-border"></div> 
    <div class = "menu-items-storage"> 
    <div class = "menu-item">#1</div> 
    <div class = "menu-item">#2</div> 
    <div class = "menu-item">#3</div> 
    <div class = "menu-item">#4</div> 
    </div> 
    <div class = "menu-border"></div> 
</div> 

.menu { 
    width: 100%; 

    background-color: #ffe0e0; 

    font-size: 0px; 
} 

.menu .menu-border { 
    display: inline-block; 

    width: 75px; 
    height: 30px; 

    background: #bb0000; 
} 

.menu .menu-items-storage { 
    display: inline-block; 
} 

.menu .menu-item { 
    display: inline-block; 

    width: 30px; 
    height: 30px; 

    margin: 0px 10px; 
    padding: 0px; 

    font-size: 16px; 

    border: 2px solid #80ff80; 
    background-color: #e0ffe0; 
} 

Answer 1

私が正しく理解すれば、このように？あなたの問題によると、私は90％に最も近いだと思いますSee this fiddle

.menu .menu-items-storage { 
    display: inline-block; 
    width: 30%; 
} 

Answer 2

..

は私のバイオリンを確認してください。Demo

私はpositionプロパティでプレイを使用していた...投稿ではないために残念あまりにも多くの行のようにCSS。