Bagaimana mengubah urutan nenek moyang elemen anak fleksibel

Saya sedang mengerjakan halaman produk(https://codepen.io/oleksiukmary/pen/qPLPMb?editors=1100) dan memiliki 2 penampung - konten dan gambar di dalam penampung fleksibel. Untuk perangkat seluler(‹768px) saya perlu mengubah urutan blok gambar (selesai):

 @media only screen and (max-width: 768px) {
  padding: 5%;
  order: 2;
}

dan pindahkan judul dan harga dari blok konten di atas gambar -> mis.

  • judul
  • harga
  • gambar
  • sisa konten

Judul dan harga adalah nenek moyang dari anak fleksibel, dan setahu saya saya tidak bisa mengeluarkannya dari wadahnya. Ada ide bagaimana caranya mengerjakan ini?


html css flexbox sass
person Mary Oleksiuk    schedule 18.10.2017    source sumber
comment
Seperti yang Anda ketahui, tidak mungkin memindahkannya keluar dari wadahnya. Apakah Anda dapat menggunakan sedikit JavaScript?   -  person Brett DeWoody    schedule 18.10.2017
comment
@BrettDeWoody ya, tentu saja. Bagaimana saya bisa melakukannya?   -  person Mary Oleksiuk    schedule 18.10.2017

Jawaban (1)


arrow_upward
1
arrow_downward

Inilah solusi menggunakan JavaScript murni dalam jumlah minimal (tanpa jQuery). Idenya adalah untuk mengkloning elemen .product__image dan menempatkan klon tersebut di lokasi yang diinginkan (antara .product__price dan .product__description).

Kami kemudian akan menggunakan beberapa CSS sederhana untuk menyembunyikan/menampilkan klon/asli pada ukuran layar yang berbeda. Untuk layar di bawah 768 piksel kami akan menyembunyikan yang asli dan menampilkan klonnya, dan untuk layar di atas 768 piksel kami akan menampilkan yang asli dan menyembunyikan klonnya.

Saya telah menyertakan tautan ke Codepen di bagian bawah, yang lebih mudah untuk melihat daya tanggapnya.

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="/id#" 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="/id#" 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="/id#">XS</a></li>
      <li class="product__size-item"><a class="product__size-link" href="/id#">S</a></li>
      <li class="product__size-item"><a class="product__size-link" href="/id#">M</a></li>
      <li class="product__size-item"><a class="product__size-link" href="/id#">L</a></li>
      <li class="product__size-item"><a class="product__size-link" href="/id#">XL</a></li>
    </ul>

    <a class="button button--green" href="/id#">Add your map</a>
    <a class="button" href="/id#">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="/id#"><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="/id#"><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="/id#"><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="/id#"><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>

Dan inilah Codepen sehingga Anda dapat bereksperimen dengan daya tanggapnya.

person Brett DeWoody    schedule 18.10.2017