I need to change the order of the slides in the front-end, so my client can select the position/order of each slide. I just realised that I could use the css flex box property "order: x" but it doesn't work fine if I have the Loop mode on.

<div class="jt-slider">
    <div class="swiper-wrapper">

        <div class="swiper-slide" style="background-image: url(coming/jt_0.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_1.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_2.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_3.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_4.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_5.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_6.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_7.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_8.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_9.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_10.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_11.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_12.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_13.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(coming/jt_14.jpg)"></div>
    
    </div>

Thats the basic Swiper html structure, when the loop mode is rendered it copy all the divs and adds a class "swiper-slide-duplicate"

It's strange that Swiper doesn't have an specific option to reorder them independently after the render...

I'm using native JavaScript, Jquery and CSS

Thank you!