.two-col {
    display: flex;
    flex-direction: column;
}

@media (min-width: 960px) {
    .two-col { flex-direction: row; }

    .two-col.controlled-width {
        margin: 0 auto;
        padding: 0 16px;
        max-width: 1160px;
    }
}

.two-col.controlled-width > * { padding: 0 35px; }

.two-col.even > * { flex: 1; }

.two-col.sidebar-right .right,
.two-col.sidebar-left .left { flex: 4; }

.two-col.sidebar-left .right,
.two-col.sidebar-right .left { flex: 8; }

.two-col.sidebar-left .right { order: 1; }
.two-col.sidebar-right .left { order: 1; }

.two-col.sidebar-left .left { order: 2; }
.two-col.sidebar-right .right { order: 2; }

@media (min-width: 960px) {
    .two-col > * {
        order: 1 !important;
    }

    .two-col.even > * { max-width: 50%; }

    .two-col.sidebar-right .right { max-width: 33.33333%; }

    .two-col.sidebar-right .left { max-width: 66.66667%; }
    
    .two-col.sidebar-left .left { max-width: 33.33333%; }

    .two-col.sidebar-left .right { max-width: 66.66667%; }
}