сложных элементы позиционирования (умножает строку)

Question

всех

скажи мне, как программировать элементы таким образом, чтобы при изменении размера экрана одна части элементов позиционировались в нескольких рядах, а другой - в ряде

два случая: 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

Если я правильно понял, вот так? See this fiddle

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

Answer 2

По вашему вопросу, я думаю, что я получил ближе всего к 90% ..

проверить мою скрипку: Demo

мне пришлось использовать игру с position собственности .. извините за не размещение css как слишком много строк.