วิธีเปลี่ยนลำดับบรรพบุรุษขององค์ประกอบลูกดิ้น

var productImage = document.querySelector('.product__image');
var productContent = document.querySelector('.product__content');
var productDescription = document.querySelector('.product__description');

productImageClone = productImage.cloneNode(true);
productContent.insertBefore(productImageClone, productDescription);

.product {
  display: flex;
  @media only screen and (max-width: 768px) {
    flex-direction: column;
  }
  &__content {
    width: 50%;
    padding: 5% 10% 5%;
    @media only screen and (max-width: 768px) {
      padding: 5%;
      order: 2;
    }
    @media only screen and (max-width: 768px) {
      width: 100%;
      padding: 35px 28px 28px 28px;
    }
    .product__image {
      @media only screen and (min-width: 768px) {
        display: none;
      }
      @media only screen and (max-width: 768px) {
        display: block;
      }
    }
  }
  &__title {
    padding-bottom: 8px;
    font-size: 38px;
    line-height: 40px;
    font-weight: 500;
    color: #000;
    @media only screen and (max-width: 768px) {
      font-size: 28px;
      line-height: 30px;
    }
  }
  &__description {
    padding-bottom: 15px;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    @media only screen and (max-width: 768px) {
      font-size: 12px;
      line-height: 18px;
    }
  }
  &__price {
    padding-bottom: 9px;
    font-size: 16px;
    line-height: 21px;
    font-weight: 500;
    color: #000;
    &--discount {
      color: #000;
      text-decoration: line-through;
    }
  }
  &__small-title {
    font-size: 14px;
    line-height: 25px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000;
  }
  &__colors {
    padding: 10px 0;
    &-item {
      display: inline-block;
      margin-right: 14px;
    }
    &-link {
      width: 34px;
      height: 34px;
      display: inline-block;
      border: 1px solid transparent;
      border-radius: 34px;
      text-align: center;
      img {
        width: 100%;
      }
      &:hover,
      &--active {
        border: 1px solid #000;
      }
    }
  }
  &__size {
    margin-bottom: 30px;
    &-item {
      display: inline-block;
      margin-right: 12px;
      font-size: 14px;
      line-height: 15px;
      font-weight: 700;
      color: #000;
    }
    &-link {
      width: 34px;
      height: 34px;
      display: inline-block;
      line-height: 34px;
      text-align: center;
      border: 1px solid transparent;
      border-radius: 34px;
      &:hover,
      &--active {
        border: 1px solid #000;
      }
    }
  }
  .button {
    width: 100%;
    margin-bottom: 15px;
  }
  &__image {
    @media only screen and (max-width: 768px) {
      display: none;
    }
  }
  &-thumbnails {
    &__item {
      display: inline-block;
      margin-top: 14px;
      margin-right: 23px;
      position: relative;
    }
    &__image {
      width: 117px;
      height: 117px;
    }
    &__link {
      &::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: #fff;
        transition: opacity .5s ease;
      }
      &:hover {
        &::after {
          opacity: 0.5;
        }
      }
    }
  }
}

<section class="product">
  <div class="product__content">
    <h1 class="product__title">Product name with short description</h1>
    <p class="product__price"><span class="product__price--discount">$24.99 </span>$19.99</p>
    <p class="product__description">Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut</p>

    <p class="product__small-title">Color: white, red & gray</p>
    <ul class="product__colors">
      <li class="product__colors-item">
        <a href="/th#" class="product__colors-link"><img src="{{'black-red_color.svg' | asset_url }}" alt="Red white option"></a>
      </li>
      <li class="product__colors-item">
        <a href="/th#" class="product__colors-link"><img src="{{'black-red_color.svg' | asset_url }}" alt="Red white option"></a>
      </li>
    </ul>

    <p class="product__small-title">Size: Small</p>
    <ul class="product__size">
      <li class="product__size-item"><a class="product__size-link" href="/th#">XS</a></li>
      <li class="product__size-item"><a class="product__size-link" href="/th#">S</a></li>
      <li class="product__size-item"><a class="product__size-link" href="/th#">M</a></li>
      <li class="product__size-item"><a class="product__size-link" href="/th#">L</a></li>
      <li class="product__size-item"><a class="product__size-link" href="/th#">XL</a></li>
    </ul>

    <a class="button button--green" href="/th#">Add your map</a>
    <a class="button" href="/th#">Add to Cart</a>


  </div>
  <div class="product__image">
    <img src="https://cdn.shopify.com/s/files/1/2420/2709/t/1/assets/bg_girl_home-image.jpg?14680714382635068032" alt="Product">

    <ul class="product-thumbnails">
      <li class="product-thumbnails__item">
        <a class="product-thumbnails__link" href="/th#"><img class="product-thumbnails__image" src="https://cdn.shopify.com/s/files/1/2420/2709/t/1/assets/product_image.jpg?14680714382635068032" alt="Product"></a>
      </li>
      <li class="product-thumbnails__item">
        <a class="product-thumbnails__link" href="/th#"><img class="product-thumbnails__image" src="https://cdn.shopify.com/s/files/1/2420/2709/t/1/assets/product_image.jpg?14680714382635068032" alt="Product"></a>
      </li>
      <li class="product-thumbnails__item">
        <a class="product-thumbnails__link" href="/th#"><img class="product-thumbnails__image" src="https://cdn.shopify.com/s/files/1/2420/2709/t/1/assets/product_image.jpg?14680714382635068032" alt="Product"></a>
      </li>
      <li class="product-thumbnails__item">
        <a class="product-thumbnails__link" href="/th#"><img class="product-thumbnails__image" src="https://cdn.shopify.com/s/files/1/2420/2709/t/1/assets/product_image.jpg?14680714382635068032" alt="Product"></a>
      </li>
    </ul>
  </div>
</section>