我正在处理产品页面（https://codepen.io/oleksiukmary/pen/qPLPMb?editors=1100）并拥有2个容器 - 灵活容器内的内容和图像。对于移动设备（＆lt; 768px），我需要更改图像块的顺序（完成）：
@media only screen and (max-width: 768px) {
padding: 5%;
order: 2;
}
并从图片上方的内容块移动标题和价格 - ＆gt;离。
标题和价格是灵儿的祖先，据我所知，我不能将它们从容器中移出。知道怎么做吗？
答案 0 :(得分：1)
这是使用最少量纯JavaScript（无jQuery）的解决方案。我们的想法是克隆.product__image元素并将克隆放在所需位置（.product__price和.product__description之间）。
然后我们会使用一些简单的CSS来隐藏/显示不同屏幕尺寸的克隆/原始内容。对于低于768px的屏幕，我们将隐藏原始屏幕并显示克隆，对于768px以上的屏幕，我们将显示原始屏幕并隐藏克隆。
我在底部包含了一个指向Codepen的链接，这样更容易看到响应能力。
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="#" 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="#" 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="#">XS</a></li>
<li class="product__size-item"><a class="product__size-link" href="#">S</a></li>
<li class="product__size-item"><a class="product__size-link" href="#">M</a></li>
<li class="product__size-item"><a class="product__size-link" href="#">L</a></li>
<li class="product__size-item"><a class="product__size-link" href="#">XL</a></li>
</ul>
<a class="button button--green" href="#">Add your map</a>
<a class="button" href="#">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="#"><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="#"><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="#"><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="#"><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>
这里是Codepen，所以你可以尝试一下响应性。