使用css切换元素顺序

我正在尝试使用 为移动显示重新排序元素。 我的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 -->

但它不起作用。（我加了一句！很重要，但没用） 我做错了什么？

---

谢谢

将父对象设置为位置：相对，将子对象设置为位置：绝对

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

这是一个JS小把戏，您可能需要根据屏幕分辨率调整#product-276的高度，例如，@media all和（最小宽度：770px）中的高度可能是400px，在不同的断点处或多或少，例如@media all和（最小宽度：320px）

@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;
    }
}

#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;
}