0

I am trying to use What is the best way to move an element that's on the top to the bottom in Responsive design to reorder elements for a mobile display. My html is: 

<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 -->

I would like to put the title of the product 'Aloe Vera Soothing Face Cream' ABOVE the image . (In the HTML it is below the image). I'm using the 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;
    }
}

but it isn't working. (I added !important but it didn't help) What am I doing wrong? Thanks

Community
  • 1
  • 1
LTech
  • 1,677
  • 5
  • 29
  • 48

1 Answers1

0

How about setting the parent to position:relative and setting the children to position:absolute;

This can be done inside your existing media query so full size desktop browsers render it as the default.

Here's a JS Fiddle of it, you might have to adjust #product-276's height depending on screen resolution, for example it might be 400px in @media all and (min-width: 770px) and more or less at different break points such as @media all and (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;
}
Wade Sonenberg
  • 37
  • 5