Different float behavior with Bootstrap - html

Question

I was just about to answer someones question, when I stumbeled upon a weird behavior, which I cannot explain at the moment. So I have the HTML and CSS Code in the Snippet below. if you look at it on Full Screen, the bottom left blue div is below the red one. I tested this Code on jsfiddle, too, and it works as expected. The blue div is aligned with the red one.
Now, I do know, that this happens, because at Stackoverflow, the custom CSS gets applied BEFORE Bootstrap, while its the other way around on jsfiddle. So the styles are overwritten by each other, depending on which platform it runs.
I also know, that this is NOT the common approach to create a two column Layout. As mentioned, I found this behavior while trying to answer this question. In this case, the guy who asked the question was not able to change the HTML structure, so we had to deal with this.
What I don't know is, why there is a difference, since they both overwrite float: left; with float: left; I thought it doesn't matter where the css comes from, the behavior should be the same.
So here is the link to the fiddle: https://jsfiddle.net/we9jcd8c/
And here is the Stack Snippet
.blue {
border: 10px solid #fff;
background: blue;
height: 150px;
float: left;
}
.red {
border: 10px solid #fff;
background: red;
height: 300px;
float: right;
}
#media screen and (max-width: 768px) {
.red, .blue {
float: none;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="outer">
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 red">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
</div>
To illustrate the difference, I added a picture:

Answer 1

As you said, the order of the style are the same.
But even in the blue block override float: left; by float: left; the red block has two different behavior : float: left; in bootstrap and float: right; according to the .red css class.
So on the fiddle snippet, the red block floats on the right allowing the bleu block to be in line and on stack overflow, the bleu tries to float left after the red block and is unable due to the 12 column being taken already.

Answer 2

This is classical mistake for somebody with no experience in CSS structure. The best way is to create 2 columns like:
here left boxes
here right boxes
If your content is dynamic, you must target box with problems and add after close this,
.clearfix { clear: both/left/right }.
But first way is the academic way to make columns in float based layout.