How can use Bootstrap clearfix for clearing floats?

Question

I have a WordPress theme in my single.php page. Below follows the HTML code:

<div class="container">
    <div class="row">

        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <div id="single-post">
                single post content
            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div id="sidebar-area">
                sidebar area
            </div>
        </div>

    </div>
</div>

CSS code:

#single-post,
#sidebar-area {
    margin:10px auto;
    background: #fff;
    border: 1px solid #d7d7d7;
    padding: 15px;
}

Image Presentation

When my single post content height is shorter than the side bar area, some of sidebar widgets goes to under the single content area. How can I show all sidebar widgets within sidebar area if the sidebar taller than single content by using Bootstrap clearfix class?

Answer 1

Thank you for reply me but my problem it is solved i used this grid below within my sidebar widget because it is repeated with every widget and i removed the code and pasted within sidebar.php file and my problem solved and all widgets shown in sidebar area

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
</div>