How to make flexible (fluid + static) 3-column layout?

Question

css

Hello colleagues!
I'm laying out a layout in 3 columns:
1. left sidebar 300px
2. content - rubber
3. right sidebar 200px
Since the grid is supposed to be highly adaptive, you need to make the layout of the columns as simple as possible so that it is easy to manipulate them.
The right column, when the window width is reduced, should go under the content, so I don’t want to change the order of the columns in the markup.
I'm afraid to use calc (in vain?), Traffic from old browsers is possible.
I don't use bootstrap, flexbox either.
Here is the layout: https://jsbin.com/roqiqokine/edit?html,css,output

<div class="clearfix">
   <div class="sidebar_left"></div>
   <div class="content"></div>
   <div class="sidebar_right"></div>
</dv>

.sidebar_left {
   float: left;
   width: 300px;
}

.sidebar_right {
   float: right;
   width: 200px;
}

.content {
   margin-right: 200px;
   margin-left: 300px;
   padding: 0 50px;
}

In this layout, the problem is that the right column crawls down. If you swap the content and sidebar_right columns in the markup, then everything is repaired, but this is a bad way.
Tell me the right way?
Thank you.

Answer 1

https://jsfiddle.net/r4s1w6zv/
or so
https://jsfiddle.net/r4s1w6zv/2/

Answer 2

With floats, always draw the floating elements (in this case, the sidebars) first.
And only after that the usual static.
Those.:

<div class="clearfix">
   <div class="sidebar_left"></div>
   <div class="sidebar_right"></div>
   <div class="content"></div>
</dv>

And to make it adaptive in your case, use the original html version, but in styles - through table-cell and (min-|max-)width.

Answer 3

try bootstrap. He's not as scary as he's made out to be. download and connect the libraries, spend 20 minutes studying the names of the column classes, and voila.
and by the way, there is also a five-column bootstrap.