Change div order on smaller screens

Question

I am trying to change div orders in the new Opencart 2.0 template, so that the add to cart button appears above the product description when using smaller screens.

This is what I tried but doesn't seem to work

CSS:

@media screen and (max-width:767px){
    #parent{
        display:flex;
        flex-flow: column;
    }
    #a{order:1;}
    #b{order:3;}
    #c{order:4;}
    #d{order:5;}
    #e{order:2;}
}

HTML:

 <div id="parent">

   <div class="col-sm-8">
      <ul class="thumbnails" id="a"></ul>
      <ul class="nav nav-tabs" id="b"></ul>
      <div class="tab-content" id="c"></div>
   </div>

   <div class="col-sm-4" id="d">
      <div class="main-product-info" id="e"></div>
   </div>

 </div>

Basically the main-product-info div needs to go above nav-tabs nav.

Also I tried putting the parent div below col-sm-8 but then the page is all messed up...

Any suggestions are highly appreciated!

Thanks!

try the pull and push classes. for bootstrap since that's what I think you are using. They are practical and help rearrange order of stuff. — Coding Enthusiast, Jun 19 '15 at 20:00
Note that `flex` doesn't work in IE until 11 (10 with a different syntax) so I would avoid using it unless you don't seed to support older versions of IE. http://caniuse.com/#feat=flexbox — CodingWithSpike, Jun 19 '15 at 20:41

score 1 · Answer 1 · answered Jun 19 '15 at 20:24

You can do this simply by using jQuery functions : append(); before(); after();

First, get window width:

var screenWidth = $(window).width();

Second, create condition:

 if (screenWidth <= 767) {
         $('#b').before($('#e'));
        } else {
    return false;}

Thats all.

score 0 · Answer 2 · edited May 23 '17 at 11:51

You could try to dynamically add these through JavaScript. You can make a constructor for each of these objects and move/add them in a different order if the size is less than certain bounds.

Here, you can find an answer which describes how to create and style a div through JavaScript. You could then add them to the parent divs (which you could choose to construct or just find) by appendchild(child).

I hope that helps!

Ryan · Answer 3 · 2015-06-19T20:17:47.017

using flex for this almost feels like overkill.

other options that are easier to understand would be displaying parent as a table, nav as table-footer, and main-product-info as table-header. which would accomplish this.

you could also swap the order of the nav and main product info divs (i added id="nav" for the example)

<div id="parent">
    <div class="col-sm-4" id="d">
        <div class="main-product-info" id="e"></div>
    </div>
   <div class="col-sm-8" id="nav">
       <ul class="thumbnails" id="a"></ul>
       <ul class="nav nav-tabs" id="b"></ul>
      <div class="tab-content" id="c"></div>
   </div>
</div>

and float id="d" to the right so something like

#d {
    float:right;
}
#nav {
    float:left;
}

ensure that d and nav take up appropriate space, which the css style box-sizing:border-box; may help since that incorporates borders and padding in your width style, but not margins, instead of including none of those three in the width style. so long as the total widths of both of them does not exceed the parent, they should float just fine.

Edit: i would also like to note that while i don't know how flex works, im fairly positive you cant reorder divs inside of divs so that they are no longer inside of those divs, you probably cant move E out of D like you try. you could however try assigning an ID to your div class="col-sm-8" and reordering only that one and D like so.

<div class="col-sm-8" id="nav">

and the css

#nav{order:2;}
#d{order:1}

this may be your personal issue here. but again i do not know fully how flex works, and have not used it yet.

score 0 · Answer 4 · answered Jun 19 '15 at 20:33

If youa re using Bootstrap (and I suspect you might be based on the use of col-* classes) then you can do this with the column ordering push and pull classes in Bootstrap.

Here is a jsFiddle example. If you resize the result box, when really small the "product info" is on top, and once wide enough, "product info" is on the right in a column.

The sample HTML from my jsFiddle is:

<div id="parent">
  <div class="container-fluid">
    <div class="row">

      <div class="col-sm-push-8 col-xs-12 col-sm-4" id="d">
        <div class="main-product-info" id="e">product info</div>
      </div>

      <div class="col-xs-12 col-sm-pull-4 col-sm-8" id="nav">
        <ul class="thumbnails" id="a">thumbnails</ul>
        <ul class="nav nav-tabs" id="b">nav tabs</ul>
        <div class="tab-content" id="c">tab content</div>
      </div>

    </div>
  </div>
</div>

Change div order on smaller screens

4 Answers4