Note: We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.
Though we don't offer a way to set specific column widths for mobile (you can only enable or disable the default stacking order), you can use this little trick to modify the column width.
Say you have a 4-column grid on desktop you want to stack to 2 columns for mobile. Here's how.
Step 1: Assign a custom class
Under the Section Styles for the section you want to customize, assign a custom class. Let's call it 'custom-grid.'
Step 2: Add custom CSS
Now go to Customize > Advanced in Semplice and select the Mobile option from the custom CSS editor dropdown. Add this CSS code to the CSS editor:
.custom-grid .column {
width: 50% !important;
max-width: 50% !important;
flex-basis: 50% !important;
}
Your 4-column grid will now stack down to two columns for mobile only. You can then add this code into the Tablet and Tablet Wide CSS editors if you want this stacking behavior for other smaller device widths.
Repeat as needed
Remember, we assigned the custom class of 'custom-grid' so that this behavior ONLY affects any section with this class. Be sure to add this classname to any section you want to have this stacking behavior.