Cannot make bootstrap columns "fluid" - html

Question

I'm trying to make my divs "fluid" in a sense.
Example:
I have three divs and each has a class : <div col-12-xs col-6-md>
This means that on a medium and large screen div one and two would be side by side and div 3 would be below them.
<div class="container">
<div class="row">
<div class="col-sm-6 box">One</div>
<div class="col-sm-6 box">
Two
<br>
Two
<br>
Two
</div>
<div class="col-sm-6 box">Three</div>
</div>
</div>
So if this example code is used you would obviously be pushing the third div down while div two grows in height as more content is added.
My question is this.
Is there a way that I can make diff three stay below div one as div two grows in height but when the screen is smaller div two should still move beneath div one and above dif three.
Example of the problem
As you can see in the picture I would like to have div three below div one even if div two grows in height but on a small screen div two should move between div one and two.
Can this be done with bootstrap?

Answer 1

Make the second div to float:right. I have added pull-right class for that as you are using bootstrap
here is my fiddle https://jsfiddle.net/ze4g18a7/
div {
text-align:center;
font-size:20px;
}
.div1 {
height: 200px;
background-color: #ffe6ff;
}
.div2 {
height: 400px;
background-color: #ccfff5;
}
.div3 {
height: 200px;
background-color: #80dfff;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="div1 col-xs-12 col-sm-6 col-md-6 col-lg-6">1</div>
<div class="div2 col-xs-12 col-sm-6 col-md-6 col-lg-6 pull-right">2</div>
<div class="div3 col-xs-12 col-sm-6 col-md-6 col-lg-6">3</div>
</div>

Answer 2

You could add a clearfix after the first 2 divs, like so:
<div class="container">
<div class="row">
<div class="col-sm-6 box">One</div>
<div class="col-sm-6 box">
Two
<br>
Two
<br>
Two
</div>
<div class="clearfix col-xs-12></div>
<div class="col-sm-6 box">Three</div>
</div>
</div>
This will cause the third div to always stay below the top two