Sort CSS DIV positioning

Asked

Viewed 2,049 times

5

Is there any chance I could position the .divdois above the .divum only with CSS without having to change the HTML position? 

<style>

.divum {
    width: 100%;
    height: 200px;
    background: black;
}

.divdois {
    width: 100%;
    height: 200px;
    background: red;
}

</style>

<div class="divum"></div>
<div class="divdois"></div>
html css

  • In case that div would be responsive, could not do something failed from this model

2 answers

6


You can use the Flexbox. He works as a flex container, capable of sorting and directing the elements children. To use it, you need to determine display: flex; and direct according to the requirements you want, in your case flex-direction: column;, this configures the column ordering of your Ivs. By default, it always directs in line.

After you apply this setting to container, it is necessary to add to the elements children the parameter order, setting with numerical value the order you want to display your Divs (this also applies to negative values).

.container { 
  display: flex; 
  flex-direction: column; 
}

.divum { 
  width: 100%;
  height: 200px;
  background: black;
  order: 2; 
}

.divdois {
  width: 100%;
  height: 200px;
  background: red;
  order: 1; 
}
<div class="container">
  <div class="divum"></div>
  <div class="divdois"></div>
</div>

There are other definitions that you can apply depending on your need on the site origamid there is great content on the subject. You can also see on CSS-Tricks and in the MDN.

3

This solution uses CSS only and works with dynamic content

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

Or flex-box

/* -- Where the Magic Happens -- */

.container {
  
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}
<div class="container">
  
  <div class="first">

     Primeira

  </div>
  
  <div class="second">

    Segunda

  </div>
  
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.