1. Duplicate Image Module Method:

1. 1.1. Enable Visual Builder: Click on the three dots in the Visual Builder and activate the "Tablet View."

2. 1.2. Duplicate Image Module: Duplicate the image module you want to rearrange.

3. 1.3. Adjust Module Visibility:

1. - For Computer View: Disable the duplicated module on tablet and phone.

2. - For Tablet/Phone View: Disable the original module on the desktop.

4. 1.4. Save Changes: Exit the Visual Builder, save changes, and preview the site to ensure the desired order.

2. Custom CSS Method:

1. 2.1. Enable Visual Builder: Activate the "Tablet View" in the Visual Builder.

2. 2.2. Delete Image Module: Remove the image module you want to rearrange.

3. 2.3. Insert Custom CSS Code:

1. - Navigate to Settings > Advanced > Custom CSS.

2. - Insert the provided code in the main element for tablet and phone views.

4. 2.4. Adjust Column Order:

1. - Go to Settings > Advanced > Custom CSS for each column.

2. - Insert the corresponding code to set the desired order (e.g., changing 1 to 2).

5. 2.5. Save Changes: Save the changes and exit the Visual Builder.

3. Verification:

1. 3.1. Validate Changes: Preview the site on different devices (computer, tablet, phone) to ensure the column order is as intended.

4. Additional Notes:

1. 4.1. Columns Stacking Order: Remember, in tablet view, columns stack from left to right, and the leftmost column is always considered number one.

2. 4.2. Design Considerations: The custom CSS method may be preferred to avoid design issues with the computer view when using the duplicate module method.

Code:

Row:

display: flex;

flex-wrap: wrap;

Column

order: 1;