Mobile layout messed up

The layouts showing on both a 7" tablet and a 5" phone are extremely jumbled with open spaces and modules on top of modules. Rather than just moving modules below each other, they are in odd places and the site becomes illogical and unusable.

I did have to change margins of several items on the main website to make things fit and show appropriately, but I don't see how that would have thrown off the spacing of everything so much.

The site under development is at bwd4.com .

Thank you.

EDIT: I've been able to fix most of the jumbled layout, but here are some spots that overlap still on mobile:

1. The header items in logorow
2. Footer items in bottomrow and copyright
3. excess space between the calendarrow and contentrow on all pages except the Home page

Try some of this fixes:
in template_css.css edit

@media (max-width: 992px)
.sparky_logo, .sparky_logo a {} REMOVE text-align: left;

and

.copyrightrow .container .row {} REMOVE margin-top: -77px;

and for calendarrow and contentrow try to find settings in sparky.

Thank you. Those fixes helped and I was able to adjust the other spacing.

Slicebox doesn't show full height in portrait mode on a 5" screen, but the other layout issues seem to be resolved.