*Complex request* I'd like a text layout to split into two columns rather than one when it goes down to mobile size - full explanation in post

Site URL: https://ladybug-chicken-2tp4.squarespace.com/

Hello,

I have a page on my site: https://ladybug-chicken-2tp4.squarespace.com/price-list

Site pass: *3iRgpCKJ-8@bBZ7

On this page i have a set of prices in 3 columns. When it goes down to mobile, it becomes only one column and the prices no longer align, they appear underneath. This is how it appears currently on the link above.

However, I'd like the prices to be on the right of the items, so that you can see how much each thing is. I have mocked this up on the attached image. This is how I would like it to look. 

TLDR: how the link is now (view on mobile) is the current state (undesireable), how the attached image is, is how i would like it to be (awesome!).

Is this even possible? Thanks in advance for any insight - I'm out of my depth for sure!

Jack

Try adding this to Design > Custom (this for first section)

/* Mobile price list */
@media screen and (max-width:767px) {
div#page-section-61f6a2f76ed44e699059edf7 .span-12>.row>.col:nth-child(2) {
    width: 70% !important;
    float: left !important;
}
}