Forcing flexbox element to float right - html

Question

I'm currently working on responsiveness on my website and I hit the wall. On smaller resolutions I changed the flex-direction to column from row, changed the ordering of flex elements, changed the main textbox width to 100% and sideboxes to 50%.
Code looks like this:
<section class="about" id="ABOUT">
<div class="about-sidebox l">
</div>
<div class="about-mainbox">
</div>
<div class="about-sidebox r">
</div>
</section>
As you can see the sideboxes are not within the container. Putting them in container helps but completely ruins my previous layout.
CSS for wanted resolution is:
.about {
flex-direction: column;
}
.about-mainbox {
order: 1;
}
.about-sidebox {
order: 2;
width: 50%;
flex-wrap: wrap;
}
Effect is like this:
As you can see I want the sideboxes to be next to each other. Any solution I can't think of without adding additional container?

Answer 1

I hope I've understood you correctly. You could remove the flex-direction property from .about
Add flex-wrap. Then just give .about-mainbox a width of 100%
.about {
display: flex;
flex-wrap: wrap;
}
.about-mainbox {
order: 1;
width: 100%;
}
.about-sidebox {
order: 2;
width: 50%;
}
<section class="about" id="ABOUT">
<div class="about-sidebox l">demo left
</div>
<div class="about-mainbox">demo
</div>
<div class="about-sidebox r">demo right
</div>
</section>

Answer 2

The simplest possible is to do this;
Set the about to flex-wrap: wrap so its flex items can wrap, skip flex-direction so it uses its default row
Set the mainbox to order: -1 (default is 0), which will position it before the sidebox's, and flex-basis: 100%, which will make it take full width and by doing that, it pushes the sidebox's to a new line
Give the sidebox's flex-basis: 50% to be equally wide, and min-width: 0; so they stay side-by-side (if you wan't them to wrap and stack vertical when their content force's them to, drop this, or control it with a set width, i.e. min-width: 150px;)
I also recommend you use Flexbox's own properties, i.e. in this case flex-basis instead of width
.about {
display: flex;
flex-wrap: wrap;
}
.about-mainbox {
flex-basis: 100%;
order: -1;
}
.about-sidebox {
flex-basis: 50%;
min-width: 0;
}
<section class="about" id="ABOUT">
<div class="about-sidebox l">Left
</div>
<div class="about-mainbox">Main
</div>
<div class="about-sidebox r">Right
</div>
</section>