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.
Step 1
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.
Step 2
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>
Step 3
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.