Hi! I’m hoping for some help. The mobile view for some of my pages is defeating the purpose of my site’s functionality.

4 of my pages (in Mobile View) automatically STACK the left column and right column. For the purpose of my site I need the information to appear side-by-side.

The left column is filled with single images of books in a long column, with custom spacing between them (150-160 px). This is so that it lines up perfectly with the right column, which is a VIDEO GALLERY (plugin).

Desktop view (correct): https://www.dropbox.com/s/w366knyg2srtrek/Screenshot_Desktop.PNG?dl=0

However, when you view on MOBILE, the left column (all the images) are stacked on top of the video gallery.

Any idea how I can override the columns automatically stacking, and instead reduce the size of everything so it can stay side-by-side?

My site isn’t launched yet, so I can’t provide a link. But here are some more screenshots:

Mobile view – Column 1 is stacked on top
https://www.dropbox.com/s/uw4ps27hgiz2eph/Screenshot_Mobile_Column1%28stacked_at_top%29.PNG?dl=0

Mobile View – Column 2 is stacked at the bottom
https://www.dropbox.com/s/vyhlpf164qansvu/Screenshot_Mobile_Column2%28stacked_at_bottom%29.PNG?dl=0

(I also have Visual Composer)

Achievable in CSS?

Also, I’m also willing to design a completely different page for mobile viewing, I just don’t know how to tell wordpress to display a different page when viewed from a mobile device.