@media (max-width: 1024px) {
    #main-footer .row>div[class*="col-"] {
        flex: 0 0 100%;
        /* Two columns on screens up to 1024px */
    }
}

@media (max-width: 768px) {
    #main-footer .row>div[class*="col-"] {
        flex: 0 0 100%;
        /* Full width for all columns on screens up to 768px */
        text-align: center;
        /* Center align text */
    }
}