I am working on a Flask / Vue.js web app that I want to have work well with both laptop and mobile browsers. The layout I've chosen is to have a series of mobile-screen-shaped areas that are oriented in a left-to-right fashion when viewed on a laptop browser. Currently when viewed on mobile those mobile-screen-sized areas get shifted into a top-to-bottom orientation, and the user can scroll the screen up and down to go through them all.
What I'd like to do is to have the mobile CSS instead simulate a mobile app by having those cards(?) oriented left-to-right (like the laptop view), and have a swipe shift each one into view or out of view, but always snapping to a single card at a time, rather than displaying 1/4th of the first card and 3/4ths of the second card (for example).
Current laptop browser view:
Desired mobile behavior:
