How to design mobile friendly columns

In this example, we're going to create a two-column row for creating a list using icons as bullet points. When using columns and rows to create a list with icons on the left or right side of each line item it's necessary to create a new row for each list item. This will keep the text aligned with the icon at different screen sizes and devices (desktop, laptop, tablet, mobile).

1. Open EE Builder for the page you're planning to create your list.
2. Click the (+) button in the top right-hand corner of EE Builder to drop down the menu and select the "Row" tab and click and drag your two-column row from this dropdown to the desired location. It's best to create a fresh row, not nested in an existing column, as this will allow you to duplicate the row later to speed up your workflow.
3. Hover over the left column of the new row you've just added. Upon hover, the column should display a border with a circle on each side.  These circles are what you'll use to click and drag your column to different widths.  As you drag the column to adjust the width a percentage will display telling you what your current width is.  You can also adjust the width in the column settings, which we'll show you in the next few steps.
4. Next, enter the Column Settings of the left column by clicking the "Edit Column" icon (resembling a square divided in half) and select column settings.  Inside the Column Settings dialog box click the Style tab (which should be selected by default).  Toward the top of the dialog box under the tab, you'll see an option labeled "Width" that includes an icon resembling Desktop, Tablet, or Mobile.  By default, it should so the Desktop icon.  Set your percentage in the field to 20% and click the Desktop icon to change device breakpoints.  Now set the percentage for Tablet, click the icon again and set your percentage for Mobile.  Click the icon again to return to Desktop.
5. From the same Column Settings dialog, under the Style tab, you'll also see an option for "Equalize Heights".  Click the dropdown box and select "Yes".  This will allow all columns in a row to share the same height, allowing you to align the contents of the columns by Top, Center, or Bottom. In this example we'll set the Vertical Alignment field to Center, which will make our icon in the left column and our text in the right column center with each other.
6. Now click the Save button at the bottom of the Column Settings dialog to save the settings we've just applied to the left column.
7. Hover over the right column in the same row now and repeat steps 3-4, but set your width to 80%.  All of the columns in your row must equal 100%, so in our example we're making the left column 20% and the right column 80%. You'll notice that step 5 has already taken effect because it was applied to a column in the same row already.
8. Now click the (+) icon in the top right corner of EE Builder and this time select the Modules tab.
9. Select your module for your left column, which in this example would be the "Photo" module and drag and drop it into the left column.
10. The Photo dialog box will appear. Click the Select Photo option and choose your desired image or upload a new one. Once your image has been selected click the Select Photo button in the bottom right corner of the Select Photo dialog box. You'll return to the Photo dialog box where you can click the Save button.
11. Repeat step 8-9 for your right column, but this time dragging your "Text Editor" module into the right column.
12. Enter your desired text into the text editor and click the Save button.
13. If your row is not nested inside another column, you may now duplicate your row by hovering over the row and selecting the icon resembling two overlapping squares, to prepare it for other bulleted line items.  
14. You may also drag this row into another column to nest it as desired by clicking and dragging the four-arrows icon.  
15. When you're done editing your page simply click the "Done" button in the top right-hand corner of EE Builder and then select "Publish".

Traditionally in responsive design elements are meant to stack into a single column on a mobile device. By setting our mobile device column widths in the beginning steps EE Builder created code the allows the elements in the row to place the elements in more than a single-stacked column. By creating a new row for each line of an icon (image) and text, we'll always have proper alignment as the page adapts to different devices and screen sizes.