Put two outside divs above center div on smaller screen - html

Question

The subject says it all, but I am looking for a clean simple way to do this. Essentially think of it like this:
[A][__B_][A]
to
[A][A]
[__B_]
Hopefully that is clear enough but I can elaborate if need be.
Thanks in advance!

Answer 1

you can use flexbox order for that
.flex-container {
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;
}
.flex-item {
box-sizing: border-box;
background: green;
padding: 20px;
width: 20%;
height: 100px;
border: 1px solid white;
color: white;
text-align: center;
}
#media screen and (max-width: 900px){
.flex-item {
background: green;
width: 50%;
height: 100px;
color: white;
text-align: center;
}
.flex-item:nth-of-type(2) {
order: 3;
width: 100%
}
}
<div class="flex-container">
<div class="flex-item">div a</div>
<div class="flex-item">div b</div>
<div class="flex-item">div a</div>
</div>
read more here: https://developer.mozilla.org/en/docs/Web/CSS/order

Answer 2

If you're starting with 3 elements in a row together, but you need element B to be outside on it's own, you will want to utilize flexbox.
You'd be focusing on the order property for the selectors, and using flex-grow on element B. Read through that document to get an idea on how to set that up, or to make sure that's exactly what you need. Otherwise, you can turn to jQuery.

Answer 3

You can do this by putting all three divs inside one div:
<div class="allthree">
<div class="twoas">
<div class="a"></div>
<div class="a"></div>
</div>
<div class="oneb">
<div class="b"></div>
</div>
</div>
Now add some CSS to this so the b is 100% width and the a is 50% width. Make sure the a is display: inline-block;
.allthree {
width: <your-width>
}
.allthree .twoas {
width: 100%;
}
.allthree .twoas .a {
display: inline-block;
width: 50%;
}
.allthree .oneb {
width: 100%;
}
.allthree .oneb .b {
width: 100%;
}