3 columns looking bad on mobile

@Sarah: It’s because of the following Custom CSS:

/* For 2 columns primary, secondary and wrapper */
.three-columns .content-sidebar-wrap {
    width: 83%;
}
.three-columns #primary {
    width: 70%;
}
.three-columns #secondary {
    width: 29.5%;
}
/* For 3rd column */
.three-columns #third {
    width: 16.5%;
}

You need to add these inside

@media screen and (min-width: 961px) {
/* Custom Column CSS */
}

@Sarah: You got me wrong. Please replace the following CSS:

@media screen and (min-width: 961px) {
/* Custom Column CSS */
}

/* For 2 columns primary, secondary and wrapper */
.three-columns .content-sidebar-wrap {
    width: 83%;
}
.three-columns #primary {
    width: 70%;
}
.three-columns #secondary {
    width: 29.5%;
}
/* For 3rd column */
.three-columns #third {
    width: 16.5%;
}

With the following CSS:

@media screen and (min-width: 961px) {
/* For 2 columns primary, secondary and wrapper */
.three-columns .content-sidebar-wrap { width: 83%; }
.three-columns #primary { width: 70%; }
.three-columns #secondary { width: 29.5%; }
/* For 3rd column */
.three-columns #third { width: 16.5%; }
}