使用 css 切换元素的顺序

Question

我正在尝试使用What is the best way to move an element that's on the top to the bottom in Responsive design 为移动显示重新排序元素。 我的 html 是：

<div id="container"><div id="content" role="main">
<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">
<a class="home" href="http://xxx">Home</a> &#47; Aloe Vera Soothing Face Cream</nav>
  <div itemscope itemtype="http://schema.org/Product" id="product-276" class="post-276  product type-product status-publish shipping-taxable product-type-simple instock">
<div class="images">
<a href="http://xxx/uploads/2014/03/Appeal_Aloe_Vera_Soothing_Face_Cream.jpg" itemprop="image" class="woocommerce-main-image zoom" title="Appeal Aloe Vera Soothing Face Cream" data-rel="prettyPhoto">
    <img width="258" height="300" 
     src="http://xxx/wp-content/uploads/2014/03/Appeal_Aloe_Vera_Soothing_Face_Cream-258x300.jpg" 
     class="attachment-shop_single wp-post-image" 
     alt="Appeal Aloe Vera Soothing Face Cream" 
     title="Appeal Aloe Vera Soothing Face Cream" /></a>    
</div>
<div class="summary entry-summary">
    <h1 itemprop="name" class="product_title entry-title">Aloe Vera Soothing Face Cream</h1>
    </div>
</div><!-- .summary -->

我想将产品标题“芦荟舒缓面霜”放在图片上方。 （在 HTML 中，它位于图像下方）。 我正在使用 css

@media all and (min-width: 770px){
#content div.product{  
display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -moz-box-orient: vertical !important;
    -webkit-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    /* optional */
    -webkit-box-align: start !important;
    -moz-box-align: start !important;
    -ms-flex-align: start !important;
    -webkit-align-items: flex-start !important;
    align-items: flex-start !important;
}
    #content div.product h1.product_title.entry-title{
    -webkit-box-ordinal-group: 1 !important;
        -moz-box-ordinal-group: 1 !important;
        -ms-flex-order: 1 !important;
        -webkit-order: 1 !important;
        order: 1 !important;
                    }
     #content div.product img.attachment-shop_single.wp-post-image{
     -webkit-box-ordinal-group: 2 !important;
     -moz-box-ordinal-group: 2 !important;
        -ms-flex-order: 2 !important;
        -webkit-order: 2 !important;
     order: 2 !important;
    }
}

但它不起作用。 （我添加了 !important 但没有帮助） 我究竟做错了什么？ 谢谢

Answer 1

如何将父级设置为 position:relative 并将子级设置为 position:absolute;

这可以在您现有的媒体查询中完成，以便全尺寸桌面浏览器将其呈现为默认值。

这是一个 JS Fiddle，您可能需要根据屏幕分辨率调整 #product-276 的高度，例如它可能在 @media all 和 (min-width: 770px) 中为 400 像素，并且在不同的休息时间或多或少@media all 和 (min-width: 320px) 等点

http://jsfiddle.net/YtSMT/

#container {
    border:1px solid red;
}
#product-276 {
    position:relative;
    height:400px;
}
.summary {
    border:1px solid green;
    position:absolute;
    top:0;
}
.images {
    border:1px solid purple;
    position:absolute;
    bottom:0;
}