How to create a multi-column page layout
Using the grid framework that our themes are built on provides a very simple way to create multi-column pages within your store.
The following is designed to work on both pages and blog articles from within your Shopify Admin.
Open a Page or Blog article in your Shopify Admin. Add the content and images to your page. On the top right of the Content window click on the < > (show HTML) icon on the top right side. You are now editing the page within the HTML view and will see what your page looks like in code view.
To create two equal columns which will be 50% width on Desktop and Tablet and then stacked on Mobile add this:
<div class="desktop-6 tablet-3 mobile-3"> Add the Left side content here </div><br>
<div class="desktop-6 tablet-3 mobile-3"> Add the Right side contet here </div> <br>
To create two columns where the left is 1/3 of the page and the right is 2/3 of the page use this:
<div class="desktop-4 tablet-2 mobile-3"> Add the Left side content here </div><br>
<div class="desktop-8 tablet-5 mobile-3"> Add the Right side contet here </div> <br>
Click save when done, this will split that page into two columns when viewed on the customer side of the site.