<nav>
<span>Первый</span>
<span>Второй</span>
<span>Третий</span>
<span>Четвёртый</span>
<span>Пятый</span>
<span>Шестой</span>
<span>Седьмой</span>
<span>Восьмой</span>
<span>Девятый</span>
<span>Десятый</span>
<span>Одиннадцатый</span>
</nav>
<p>Можно щелчком перемещать span-ы между body и nav.</p>
<span>Двенадцатый</span>

body{
  background: #223;
  color: white;
  text-align: center;
}
nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}
body:before{ content: 'Нужно меньше ширины' }
span{
  background: #444;
  padding: 0.5em 0;
}
span:hover{
  background: #555;  
}
span:first-child{
  border-top-left-radius: 1em;
}
span:last-child{
  border-bottom-right-radius: 1em;
}

@media all and (max-width: 1500px) and (min-width: 901px) {
  body:before{ content: '900..1500px' }
  span{
    width: calc(100% / 6);
  }
  span:last-child:nth-child(6),
  span:last-child:nth-child(5),
  span:last-child:nth-child(4),
  span:last-child:nth-child(3),
  span:last-child:nth-child(2),
  span:last-child:nth-child(1){
    border-top-right-radius: 1em;
  }
  span:nth-child(6){
    border-top-right-radius: 1em;
  }
  span:nth-child(6n):nth-last-child(6),
  span:nth-child(6n):nth-last-child(5),
  span:nth-child(6n):nth-last-child(4),
  span:nth-child(6n):nth-last-child(3),
  span:nth-child(6n):nth-last-child(2),
  span:nth-child(6n):nth-last-child(1){
    border-bottom-right-radius: 1em;
  }
  span:nth-child(6n+1):nth-last-child(6),
  span:nth-child(6n+1):nth-last-child(5),
  span:nth-child(6n+1):nth-last-child(4),
  span:nth-child(6n+1):nth-last-child(3),
  span:nth-child(6n+1):nth-last-child(2),
  span:nth-child(6n+1):nth-last-child(1){
    border-bottom-left-radius: 1em;
  }
}

@media all and (max-width: 900px) and (min-width: 601px) {
  body:before{ content: '600..900px' }
  span{
    width: 25%;
  }
  span:last-child:nth-child(4),
  span:last-child:nth-child(3),
  span:last-child:nth-child(2),
  span:last-child:nth-child(1){
    border-top-right-radius: 1em;
  }
  span:nth-child(4){
    border-top-right-radius: 1em;
  }
  span:nth-child(4n):nth-last-child(4),
  span:nth-child(4n):nth-last-child(3),
  span:nth-child(4n):nth-last-child(2),
  span:nth-child(4n):nth-last-child(1){
    border-bottom-right-radius: 1em;
  }
  span:nth-child(4n+1):nth-last-child(4),
  span:nth-child(4n+1):nth-last-child(3),
  span:nth-child(4n+1):nth-last-child(2),
  span:nth-child(4n+1):nth-last-child(1){
    border-bottom-left-radius: 1em;
  }
}

@media all and (max-width: 600px) and (min-width: 441px) {
  body:before{ content: '440..600px' }
  span{
    width: calc(100% / 3);
  }
  span:last-child:nth-child(3),
  span:last-child:nth-child(2),
  span:last-child:nth-child(1){
    border-top-right-radius: 1em;
  }
  span:nth-child(3){
    border-top-right-radius: 1em;
  }
  span:nth-child(3n):nth-last-child(3),
  span:nth-child(3n):nth-last-child(2),
  span:nth-child(3n):nth-last-child(1){
    border-bottom-right-radius: 1em;
  }
  span:nth-child(3n+1):nth-last-child(3),
  span:nth-child(3n+1):nth-last-child(2),
  span:nth-child(3n+1):nth-last-child(1){
    border-bottom-left-radius: 1em;
  }
}

@media all and (max-width: 440px) {
  body:before{ content: '440px..' }
  span{
    width: 50%;
  }
  span:last-child:nth-child(2),
  span:last-child:nth-child(1){
    border-top-right-radius: 1em;
  }
  span:nth-child(2){
    border-top-right-radius: 1em;
  }
  span:nth-child(2n):nth-last-child(2),
  span:nth-child(2n):nth-last-child(1){
    border-bottom-right-radius: 1em;
  }
  span:nth-child(2n+1):nth-last-child(2),
  span:nth-child(2n+1):nth-last-child(1){
    border-bottom-left-radius: 1em;
  }
}

const body = document.body;
const nav = document.querySelector( 'nav' );
document.querySelectorAll( 'span' ).forEach( s => s.onclick = e => {
  (s.parentNode===nav? body: nav).appendChild(s);
} );