Switch sections in custom module

[pmatty]

Hi, this is probably much easier than I am making it out to be but I can't for the life of me figure it out. We have two sections (an image and text) in a custom module that I want to reverse the positions of (it's currently set up so that the text is on the left and the image is on the right, I'd like it to be image on the left, text on the right). Attached is a screenshot of the module:

I'm also inserting the code for the module in the spoiler tag below, if someone could help that would be greatly appreciated.

Spoiler

<div {% if module.anchorid %}id="{{ module.anchorid }}"{% endif %} class="m-module m-visual-content overflow-x-hidden bg-{{ module.style.bg_color }} {% if module.style.min_100_vh %}min-vh-100{% endif %}">

<div class="container">

<div class="m-vc__inner position-relative">

<div class="m-vc__content">

{% if module.title %}

  <h2>{{ module.title }}</h2>

{% endif %}

{% if module.subtitle %}

  <h3 class="h5 text-dark mb-5">{{ module.subtitle }}</h3>

{% endif %}

{% if module.usp %}

<div class="d-flex flex-column gap-4 mt-4">

{% for item in module.usp %}

<div class="c-bulletpoint__title">

<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">

<path d="M18.5714 30.0002L30 18.0002L18.5714 6.00024M6 30.0002L17.4286 18.0002L6 6.00024" stroke="#775BC5" style="stroke:#775BC5;stroke:color(display-p3 0.4667 0.3569 0.7725);stroke-opacity:1;" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>

</svg>

<span class="h6 text-dark mb-0">{{ item }}</span>

</div>

{% endfor %}

</div>

{% endif %}

{% if module.cta.text %}

  {% set href = module.cta.link.url.href %}

{% if module.cta.link.url.type is equalto "EMAIL_ADDRESS" %}

  {% set href = "mailto:" + href %}

{% endif %}

<a href="{{ href }}" class="btn btn-{{ module.cta.type }} mt-4"

{% if module.cta.link.open_in_new_tab %}target="_blank"{% endif %}

{% if module.cta.link.rel %}rel="{{ module.cta.link.rel }}"{% endif %}>

{{ module.cta.text }}

</a>

{% endif %}

</div>

<div class="m-vc__image">

{% if module.image.src %}

{% set sizeAttrs = 'width="{{ module.image.width }}" height="{{ module.image.height }}"' %}

{% if module.image.size_type == 'auto' %}

  {% set sizeAttrs = 'width="{{ module.image.width }}" height="{{ module.image.height }}" style="max-width: 100%; height: auto;"' %}

{% elif module.image.size_type == 'auto_custom_max' %}

  {% set sizeAttrs = 'width="{{ module.image.max_width }}" height="{{ module.image.max_height }}" style="max-width: 100%; height: auto;"' %}

{% endif %}

{% set loadingAttr = module.image.loading != 'disabled' ? 'loading="{{ module.image.loading }}"' : '' %}

<img src="{{ module.image.src }}" alt="{{ module.image.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>

{% endif %}

</div>

</div>

</div>

</div>

[BérangèreL]

Hi @PMatlock,

Thank you for sharing your code with us and for asking the Community!

I'd be happy to put you in touch with some of our Top Experts and some of our Community Members: Hi @HWhite53, @Jnix284, @jkeough78, @JTramp4 and @himanshurauthan do you have suggestions regarding this custom module code to have the image on the left, to help @PMatlock, please?

Thanks a lot for your help and have a wonderful day and weekend!

Best,
Bérangère