I am new to bootstrap and I have the following in mind. As you can see, for large and medium devices I need 3 columns, and for extra small devices I want 1 column. But for small devices I want 2 columns and the third column to be at the bottom occupying the whole row. The code below does not work. How can I get my design working?

HTML Code:
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">

        </div>

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

        </div>

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

        </div>

    </div>
</div>