CODEWITHSUNDEEP
javascripthtmlcss
Dilip Kumar Yadav
Dilip Kumar Yadav

Reputation: 615

Use CSS to reorder more than one div

Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div when they are not in that order in the HTML? Both divs contain data that varies in height and width.

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>

Other elements Hopefully it is obvious that the desired result is:

Content to be above in this situation Content to be below in this situation Other elements When the dimensions are fixed it easy to position them where needed, but I need some ideas for when the content is variable. For the sake of this scenario, please just consider the width to be 100% on both.

Edit: A CSS solution is the most ideal solution. Thank you for the Javascript options mentioned. Without getting too wordy about what or why (or who) ... I am specifically looking for a CSS only solution (and it will probably have to be met with other solutions if that doesn't pan out).

One more ... there are other elements following this. A good suggestion was mentioned given the limited scenario I demonstrated -- given that it might be the best answer, but I am looking to also make sure elements following this aren't impacted.

Upvotes: 0

Views: 247

Answers (2)

Noopur Dabhi
Noopur Dabhi

Reputation: 1927

You can also give position relative to id wrapper, and give position absolute to all divs inside wrapper, and then setting top property of div based on order.

HTML

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>

CSS

#wrapper {
    position: relative;
}
#firstDiv {
    position: absolute;
    top: 20px;
}
#secondDiv {
    position: absolute;
    top: 0px;
}

Here is fiddle.

For dynamic height elements, you can use display:table properties.

HTML

<div id="wrapper">
    <div id="firstDiv">Content to be below in this situation</div>
    <div id="secondDiv">Content to be above in this situation Content to be above in this situation Content to be above in this situation Content to be above in this situation Content to be above in this situation
   </div>
</div>

CSS

#wrapper {
    display: table;
}
#firstDiv {
    display: table-footer-group;
}
#secondDiv {
    display: table-header-group;
}

Here is fiddle.

Upvotes: 1

m4n0
m4n0

Reputation: 32255

With CSS3 flexbox layout module, you can either use order or flex-direction: column-reverse. Latter will be better if you want the elements to be rearranged in the reverse order(bottom element first, top element last) and avoid playing with the order values. Since you don't want other elements to be affected, go with order solution.

It is worth noting that:

order only changes the painting order and not the DOM order.

flex-direction does not affect painting order but only the direction of flow.

#wrapper {
  display: flex;
  flex-direction: column;
}
#secondDiv {
  order: -1; /* Negative order because default value is 0 */
}
<div id="wrapper">
  <div id="firstDiv">
    Content to be below in this situation
  </div>
  <div id="secondDiv">
    Content to be above in this situation
  </div>
  <div id="thirdDiv">
    Third div unaffected
  </div>
  <div id="fourthDiv">
    Fourth div unaffected
  </div>
</div>

#wrapper {
  display: flex;
  flex-direction: column-reverse;
}
<div id="wrapper">
  <div id="firstDiv">
    Content to be below in this situation
  </div>
  <div id="secondDiv">
    Content to be above in this situation
  </div>
</div>

Upvotes: 6

Related Questions