Display First DIV beneath Second DIV

Question

say I have...

<div id="A"></div>
<div id="B"></div>

How can the end-user view div B on top of div A on their browser?

I'm trying to do this with CSS without editing the html.

Answer 1

You can use flex-box and order to acheive what you want

body {
  display: flex;
  flex-wrap:wrap;
}

#A {
  width: 100%;
  height:50px;
  background: red;
  color:white;
  order: 2;
}

#B {
  width: 100%;
  height:50px;
  background: black;
  color:white;
  order: 1;
}

<div id="A">A</div>
<div id="B">B</div>

Answer 2

You need to add display:flex; and flex-direction:column-reverse; to the parent of your two divs.

body{
    display:flex;
    flex-direction:column-reverse;
}

Or you can choose div's order manually with order property:

body {
  display: flex;
}

#A {
  order: 2;
}

#B {
  order: 1;
}