Flexbox container

flexbox-container.css

.flex-container {
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-container > .flex-item {
    flex-basis: 100px;
    flex-grow: 1;
    flex-shrink: 0;
}

@media print {
    .flex-container {
        display: block;
    }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 736px), only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .flex-container {
        flex-flow: column nowrap;
    }
    .flex-container > .flex-item {
        flex-basis: 50px;
    }
}