How to make the block not move in boostrap block layout?

Question

css

<div class="row">
        <div class="col-sm-4">
            <div class="avatar"></div>
        </div>
        <div class="col-sm-8">
            <div class="wall"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="frends"></div>
        </div>
        <div class="col-sm-8"></div>
        <div class="col-sm-4"></div>
    </div>
</div>

and css

.avatar {
    background-color: #cacaca;
    height: 240px;
}
.wall {
    background-color: #a9a9a9;
    height: 240px;
}
.frends {
    background-color: #cacaca;
    height: 240px;
    margin-top: 25px;
}

As the height of the wall block increases, the frends block moves down, how do I keep it clearly below the avatar block?

Answer 1

1. you shouldn't use row so often unnecessarily, 1 would be enough for you, but push pull cannot jump through it.
2. As a matter of fact, in some cases, a banal clearfix helps
in your case, there are several options. You can simply replace your row classes with col-xs-12 and throw a common row on top of them in such a case there will be a separator between them.
If you have an adaptive there and the number of columns changes, then there is also a way. but it was not in

<div class="row">
<div class="col-sm-12">
        <div class="col-sm-4">
            <div class="avatar"></div>
        </div>
        <div class="col-sm-8">
            <div class="wall"></div>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="col-sm-4">
            <div class="frends"></div>
        </div>
        <div class="col-sm-8"></div>
        <div class="col-sm-4"></div>
    </div>
</div>
</div>

Answer 2

bad markup, missing closing tag

Answer 3

Um, it's hard to get what you want.
use https://fiddle.jshell.net/ for examples
. And from the above, I assume that you need to combine them into one block like col-md-6