Tengo la siguiente estructura de diseño muy elegante en su forma de adaptarse en pantallas muy pequeñas cada columna se vuelve al 100%.

La idea principal que se adapte esta funcionando correctamente se la puede observar cambiando la resolución de pantalla:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .five-columns {
    	display: flex;
    	flex-flow: row wrap;
    }
    .column-item {
    	flex-basis: 19%;
    	flex-grow: 1;
    	margin: 0.5% !important;
    	min-width: 240px;
    	padding: 15px;
    	background-color: chocolate;
    }

<!-- language: lang-html -->

    	<div class="five-columns">
    		<div class="column-item">1</div>
    		<div class="column-item">2</div>
    		<div class="column-item">3</div>
    		<div class="column-item">4</div>
    		<div class="column-item">5</div>
    	</div>

<!-- end snippet -->

Deseo poder obtener estos 4 diseños que modificaciones flexbox se le tiene que agregar adicional para lograr lo conseguido `flex 1 10%` o `order` he buscando muchos ejemplos en la web pero la mayoría se basan a lo que ya dispongo.

Como puedo obtener estos diseños como se muestran en la siguiente images:

- https://i.imgur.com/Z7Uiewm.png
- https://i.imgur.com/UGppATP.png
- https://i.imgur.com/XdlnGUE.png
- https://i.imgur.com/cgx9NKu.png