Module postions in same row displaying horizontally in mobile layout

I recently bought the Theatre template and am currently applying it to a dev version of an existing site. Although I have taken on some of the Demo site's look, I have added new rows and module positions.

 

The problem I have is that the module positions in the same rows won't order vertically in mobile layout. However, in the demo site they do. An specific example is the bottom menu row (bottomrow). On the demo site the row is split into two module positions and three menu positions. On my site the same row is split into three module positions only and display horizontally in mobile. I have the row settings exactly the same.

Other new rows that copy the contentrow settings also display modules horizontally in mobile layout.

The dev site is here .

Hello,

Please edit this file /media/templates/site/theatre/css/custom.css and below this line:

add this:

Regards,
Milos

Thanks Milos. That didn't work. However, I copied the same CSS folder from the Hot Start I made of the template and it now works fine. 

It should be working, but you probably didn't clear the browser cache and the old custom.css file is loaded.

I checked your website now and the errors are fixed because you edited the custom.css file, not because you copied files.

Regards,
Milos

Looks like I was getting a little confused with my file copying. 

Apologies. Yes, the edit did indeed work.  ​​​​​​​