.flex-container-1-2-3-4 { display: flex; flex-direction: row; justify-content: space-between; } .flex-container-1-2 { display: flex; flex-direction: row; justify-content: space-between; width: 50%; } .flex-block-1-2 { background: #DCDCDC; padding: 15px; width: 48%; font-size: 20px; } .flex-container-3-4 { display: flex; flex-direction: row; justify-content: space-between; width: 50%; } .flex-block-3-4 { background: #DCDCDC; padding: 15px; width: 48%; font-size: 20px; } .flex-container-5-6 { display: flex; flex-direction: row; justify-content: space-between; margin-top: 15px; } .flex-block-5-6 { background: #DCDCDC; padding: 15px; font-size: 20px; width: 48%; } article { margin: 15px; box-sizing: border-box; } @media screen and (max-width: 1280px ) { .flex-container-1-2 { flex-direction: column-reverse; align-content: space-between; margin-right: 20px; } .flex-block-1-2 { width: 100%; } /*article.flex-block-1-2:first-child { order: 5; }*/ .flex-container-5-6 { flex-direction: column; align-content: space-between; } .flex-block-5-6 { width: 100%; } } @media screen and (max-width: 375px) { .flex-container-1-2-3-4 { flex-direction: column; align-content: space-between; } .flex-container-1-2 { flex-direction: column; align-content: space-between; width: 100%; } article.flex-block-1-2:first-child { order: 0; } .flex-container-3-4 { flex-direction: column; align-content: space-between; width: 100%; } .flex-block-3-4 { width: 100%; } .flex-container-5-6 { flex-direction: column; align-content: space-between; } .flex-block-5-6 { width: 100%; } }