I created a 4 column megamenu (under ‘Our Church’) with the first two columns being the same category. I hid the 2nd column’s title as explained in the docs so it looks like its under the header ‘Connect’. But now on mobile, the 2nd column is showing automatically. Is there a way to make the 2nd column appear under the 1st column (Connect) in mobile like it technically does in desktop?

Hmm, good point…
No you can’t have that out of the box.
You could fix it with some custom JS that can insert the items below the hidden mobile heading into the first one.
You would need some coding for this though, hope you know some JS or have a developer that can help.

Is there a way to show a different menu on mobile than what is shown on desktop?

from

'theme_location'=> 'main_navigation',

to say:

'theme_location'=> 'mobile_navigation',

then set it separately under Appearance->Menus.

Make sure you override the header.php in your Child theme.