Widget overlapping content when in mobile modes

Hi guys,

My theme is based on Bootstrap 3 framework, and when I'm in mobile modes, the #secondary widgets overlap the rest of the screen.

An example of this is here:
http://demo.xlearn.net.au/add-a-header-or-footer-in-word-for-mac-2016/

Screenshot of the issue is here:
http://imgur.com/wfKYE4M

You can replicate the issue by going to the page, then reduce your browser width - so it goes into responsive mode. I use Chrome on a Mac, but I also have this issue on Chrome with Windows.

I'm just wanting the #secondary widget to display underneath the #primary widget - with no overlapping.

Any ideas?

Thanks!
Brett