How to change to images rendering order

[iPutin]

On the main product page the images are displayed in default order, I have to change the rendering order: that is. the first picture should be displayed instead second, but second instead the first one. The rest images displaying without changes. How can I achieve this rendering order ?  

I am attaching the code part where image rendering happen. 

main-product

<ul class="product__media-list grid grid--peek list-unstyled slider slider--mobile" role="list">

{%- if product.selected_or_first_available_variant.featured_media != null -%}

{%- assign media = product.selected_or_first_available_variant.featured_media -%}

<li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">

{% render 'product-thumbnail', media: media, position: 'featured', loop: section.settings.enable_video_looping, modal_id: section.id %}

</li>

{%- endif -%}

{%- for media in product.media -%}

{%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}

<li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">

{% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id %}

</li>

{%- endunless -%}

{%- endfor -%}

</ul>

product-thumbnail

<modal-opener class="product__modal-opener product__modal-opener--{{ media.media_type }} no-js-hidden" data-modal="#ProductModal-{{ modal_id }}">

<span class="product__media-icon motion-reduce" aria-hidden="true">

{%- liquid

case media.media_type

when 'video' or 'external_video'

render 'icon-play'

when 'model'

render 'icon-3d-model'

else

render 'icon-zoom'

endcase

-%}

</span>

<div class="product__media media" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">

<img

srcset="{% if media.preview_image.width >= 288 %}{{ media.preview_image | img_url: '288x' }} 288w,{% endif %}

{% if media.preview_image.width >= 576 %}{{ media.preview_image | img_url: '576x' }} 576w,{% endif %}

{% if media.preview_image.width >= 750 %}{{ media.preview_image | img_url: '750x' }} 750w,{% endif %}

{% if media.preview_image.width >= 1100 %}{{ media.preview_image | img_url: '1100x' }} 1100w,{% endif %}

{% if media.preview_image.width >= 1500 %}{{ media.preview_image | img_url: '1500x' }} 1500w{% endif %}"

src="{{ media | img_url: '1500x' }}"

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: 0.64 | round }}px, (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"

loading="lazy"

width="576"

height="{{ 576 | divided_by: media.preview_image.aspect_ratio | ceil }}"

alt="{{ media.preview_image.alt | escape }}"

>

</div>

<button class="product__media-toggle" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">

<span class="visually-hidden">

{%- if position == 'featured' %}

{{ 'products.product.media.open_featured_media' | t }}

{%- else -%}

{{ 'products.product.media.open_media' | t: index: position }}

{%- endif -%}

</span>

</button>

</modal-opener>