Trying to swap an image and a block of text around, however not working with manually swapping the divs and not working with CSS or ordering – not sure if its possible because the images are in block settings and the text is in section?

Using Shopify/liquid code – mainly just JS, CSS and HTML

The whole code is meant to display as a text box on right, with an image that slides within itself on the left. The text has title, subtitle, and body text. The image can have several slides.

<style>
  .shrinkimg {
    width: 80%;
    margin: 0 auto;
    display: block;
  }

  .splithalf.texthalf {
    max-width: 600px;
    margin: 0 auto;
    justify-content: center;
  }

  .split.reverseblocks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row-reverse; /* Reverse the order of elements */
  }

  .split.reverseblocks .imagehalf {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .moreinfotab .padding.s {
    padding: 20px;
  }

  .moreinfotab .padding.s div[data="usedtocenter"] {
    max-width: 600px; /* Make the text container narrower */
    margin: 0 auto;
  }
</style>

<div id="{{ section.settings.anchor }}">
  <div class="{{ section.settings.background_class }} moreinfo">
    <div id="MoreInfoTab1" class="moreinfotab">
      <div class="unit actual limitwidth marginbottom"></div>

      {% if tab1count > 1 and section.settings.hidearrows != true %}
        <!-- Slider Arrows -->
        <div class="slide-m-prev font2 xl">←</div>
        <div class="slide-m-next font2 xl">→</div>
      {% endif %}
    </div>

    {% if section.settings.tab2text.size > 0 %}
      <div id="MoreInfoTab2" class="moreinfotab">
        <div class="split reverseblocks">
          <div class="splithalf texthalf width100">
            <div class="padding s">
              <div data="usedtocenter" style="text-align:left">
                {% if section.settings.tab2headline.size > 0 %}
                  <h2>{{ section.settings.tab2headline }}</h2>
                {% endif %}
                {% if section.settings.tab2subheadline.size > 0 %}
                  <h3 class="paddingbottom">{{ section.settings.tab2subheadline }}</h3>
                {% endif %}
                {% if section.settings.tab2text.size > 0 %}
                  {{ section.settings.tab2text }}
                {% endif %}
                {% if section.settings.tab2urltitle.size > 0 %}
                  <a href="{{ section.settings.tab2url }}" class="button">{{ section.settings.tab2urltitle }}</a>
                {% endif %}
              </div>
            </div>
          </div>

          <div class="splithalf imagehalf nooverflow width100" style="position:relative">
            <div class="tab2slideshow{{ section.id }} width100">
              {% for block in section.blocks %}
                {% if block.type == 'tab2slide' %}
                  {% assign tab2count = tab2count | plus: 1 %}
                  {% if block.settings.tab2image.size > 0 %}
                    <div>
                      <img class="shrinkimg" src="{{ block.settings.tab2image | img_url: '600x' }}" alt="">
                    </div>
                  {% endif %}
                {% endif %}
              {% endfor %}
            </div>
            {% if tab2count > 1 and section.settings.hidearrows != true %}
              <!-- Slider Arrows -->
              <div class="slide-m-prev font2 xl">←</div>
              <div class="slide-m-next font2 xl">→</div>
            {% endif %}
          </div>
        </div>
      </div>

      {% if tab2count > 1 %}
        <script>
          // Slick slider initialize
          $('.tab2slideshow{{ section.id }}').slick({
            arrows: false,
            {% if tab2count > 1 and section.settings.hidearrows != true %}
              arrows: true,
              prevArrow: $("#MoreInfoTab2 .slide-m-prev"),
              nextArrow: $("#MoreInfoTab2 .slide-m-next"),
            {% endif %}
            dots: false,
            fade: true,
            adaptiveHeight: false,
            infinite: true,
            speed: 600,
            autoplay: true,
            autoplaySpeed: 1300,
            slidesToShow: 1,
            slidesToScroll: 1
          });

          $('.tab2slideshow{{ section.id }}').show();
        </script>
      {% endif %}
    {% endif %}

    {% if tab2count > 1 %}
      <script>
        // Slick slider initialize
        $('.tab3slideshow{{ section.id }}').slick({
          arrows: false,
          {% if tab2count > 1 and section.settings.hidearrows != true %}
            arrows: true,
            prevArrow: $("#MoreInfoTab3 .slide-m-prev"),
            nextArrow: $("#MoreInfoTab3 .slide-m-next"),
          {% endif %}
          dots: false,
          fade: true,
          adaptiveHeight: false,
          infinite: true,
          speed: 500,
          autoplay: true,
          autoplaySpeed: 1300,
          slidesToShow: 1,
          slidesToScroll: 1
        });
      </script>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "Text With Carousel Image",
  "settings": [
    {
      "type": "text",
      "id": "anchor",
      "label": "Anchor Name"
    },
    {
      "type": "text",
      "id": "tab2headline",
      "label": "How-To Headline"
    },
    {
      "type": "text",
      "id": "tab2subheadline",
      "label": "How-To Sub-Headline"
    },
    {
      "type": "richtext",
      "id": "tab2text",
      "label": "How-To Text"
    },
    {
      "type": "text",
      "id": "tab2urltitle",
      "label": "How-To Link Title"
    },
    {
      "type": "url",
      "id": "tab2url",
      "label": "How-To Ing. Link"
    },
    {
      "type": "checkbox",
      "id": "hidearrows",
      "label": "Hide arrows on carousels?",
      "default": false
    },
    {
      "type": "radio",
      "id": "background_class",
      "label": "Background",
      "options": [
        {
          "value": "solid",
          "label": "White"
        },
        {
          "value": "solid1",
          "label": "Light"
        },
        {
          "value": "solid2",
          "label": "Medium"
        },
        {
          "value": "solid3",
          "label": "Dark"
        },
        {
          "value": "accent",
          "label": "Accent"
        },
        {
          "value": "empty",
          "label": "None"
        }
      ],
      "default": "empty"
    },
    {
      "type": "product_list",
      "id": "product_list_hide",
      "label": "Hide on these products",
      "limit": 50
    },
    {
      "type": "product_list",
      "id": "product_list_show",
      "label": "Show only on these products",
      "limit": 50
    }
  ],
  "blocks": [
    {
      "type": "tab2slide",
      "name": "How-To Slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "tab2image",
          "label": "Select an image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Text with Carousel Image"
    }
  ]
}
{% endschema %}