Position div B on top of div A - css

Question

Hi I'm struggling with this issue.
Desktop:
Div A
Div B
But in responsive the divs have to change their position like this:
Responsive:
Div B
Div A
I made a jsfiddle:
#a {
height: 50px;
width: 100%;
background-color: red;
}
#b {
height: 50px;
width: 100%;
background-color: green;
}
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
Is this possible?

Answer 1

You can use grid-row from CSS grid layout
section {
display: grid;
grid-auto-rows: minmax(50px, auto)
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
#b {
grid-row: 1
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
Alternatives:
use order with also CSS grid layout
section {
display: grid;
grid-auto-rows: minmax(50px, auto)
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
#b {
order: -1
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
use column-reverse from flexbox layout (as suggested by #G-Cyr in comments below)
section {
display: flex;
flex-direction: column;
}
div {
height: 50px;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
section {
flex-direction: column-reverse;
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
use flex-wrap/wrap-reverse with flexbox layout
section {
display: flex;
flex-wrap: wrap
}
div {
height: 50px;
flex: 0 100%
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
section {
flex-wrap: wrap-reverse
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
use order with flexbox layout
section {
display: flex;
flex-direction: column;
}
div {
height: 50px;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
#b {
order: -1
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>

Answer 2

If you need to support older browsers, you can do it this way as well. But this only works if the elements have a fixed height, otherwise you will have to play some other games.
#a {
height: 50px;
width: 100%;
background-color: red;
}
#b {
height: 50px;
width: 100%;
background-color: green;
}
#media (max-width:768px) {
#a {
position: relative;
top: 50px;
}
#b {
position: relative;
top: -50px;
}
}
<div id="a">
div 1
</div>
<div id="b">
div2
</div>

Answer 3

Here is another answer with 2 selector and a single rule :transform:scale(-1);
/* target the container and its direct-child */
div,
div>* {
transform: scale(-1);
}
#media (min-width:768px) {
div,
div>* {
transform: scale(1);
}
#a del {
text-decoration: none;
}
#a ins {
display: none;
}
<div>
<h1 id="a">HTML Ipsum Present<del>s</del><ins>ed</ins></h1>
<p id="b"><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>