.horizontal-quad-split { display : flex; flex-direction : row; justify-content: space-between; align-items : flex-start; .left-side, .right-side { width : 50%; display : flex; flex-direction : row; justify-content: space-between; align-items : flex-start; .column-a, .column-b, .column-c, .column-d { width: 50%; }; .column-a, .column-b, .column-c { padding-right: $secondary-padding; }; }; }; @media (max-width: $break-point-large ) { .horizontal-quad-split { flex-direction : column; .left-side, .right-side { width : 100%; .column-a, .column-b, .column-c, .column-d { width: 50%; }; .column-b { padding-right: 0; } } }; } @media (max-width: $break-point-medium ) { .horizontal-quad-split { flex-direction : column; .left-side, .right-side { flex-direction : column; .column-a, .column-b, .column-c, .column-d { width: 100%; padding: 0; }; } }; }