Bootstrap three columns unexpected behavior on desktop devices - html

Question

I'm trying to make proper order of three bootstrap's columns but I can achive it only for small devices. On desktop devices it only works fine if "important" div has hight greater than "profile" div but I have situation when "important" div has hight less than "profile". In that situation my "other" tab positions below "important" div, but not below "profile" div as it should.
How can I solve this?
Thanks
.profile {
background-color: blue;
border: 1px solid black;
}
.important {
background-color: red;
border: 1px solid black;
}
.other {
background-color: green;
border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA<br>
1<br>
2
</div>
<div class="col-xs-12 col-md-8 important pull-right">
IMPORTANT DATA
</div>
<div class="col-xs-12 other col-md-4">
OTHER DATA
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA
</div>
<div class="col-xs-12 col-md-8 important pull-right">
IMPORTANT DATA<br>
1<br>
2
</div>
<div class="col-xs-12 other col-md-4">
OTHER DATA
</div>
</div>
</div>

Answer 1

bootstrap per row hold 12 column maximum. And you give each row 16 columnRead Bootstrap Grid
.profile {
background-color: blue;
border: 1px solid black;
}
.important {
background-color: red;
border: 1px solid black;
}
.other {
background-color: green;
border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA<br>
1<br>
2
</div>
<div class="col-xs-12 col-md-4 important pull-right">
IMPORTANT DATA
</div>
<div class="col-xs-12 other col-md-4">
OTHER DATA
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA
</div>
<div class="col-xs-12 col-md-4 important pull-right">
IMPORTANT DATA<br>
1<br>
2
</div>
<div class="col-xs-12 other col-md-4">
OTHER DATA
</div>
</div>
</div>

Answer 2

Something like this?
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 blue">
PROFILE DATA
<br> 1
<br> 2
</div>
<div class="col-sm-12 col-md-8 col-lg-8 red">
IMPORTANT DATA
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4 green">
OTHER DATA
</div>
</div>
http://codepen.io/Psyll1/pen/XjBQNp

Answer 3

Friend of mine helped me to solve this problem. Thanks Rados Pavlicevic!
I only need to add
style="clear: left;"
on my OTHER DATA div.
Here is a working code sample:
.profile {
background-color: blue;
border: 1px solid black;
}
.important {
background-color: red;
border: 1px solid black;
}
.other {
background-color: green;
border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA<br>
1<br>
2
</div>
<div class="col-xs-12 col-md-8 important pull-right">
IMPORTANT DATA
</div>
<div class="col-xs-12 other col-md-4" style="clear:left">
OTHER DATA
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 profile">
PROFILE DATA
</div>
<div class="col-xs-12 col-md-8 important pull-right">
IMPORTANT DATA<br>
1<br>
2
</div>
<div class="col-xs-12 other col-md-4" style="clear:left">
OTHER DATA
</div>
</div>
</div>
Thanks!