Adjust horizontal and vertical orientation on Bootstrap

Question

My horizontal page is the way I want it:

But if you leave the vertical cell phone she’s getting like this:

How to make it vertical as follows?

Follows my code:

   <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <a href="#">
                <img src="~/Content/Images/btnHome.png" />
            </a>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
            <a href="#">
                <img src="~/Content/Images/btnProduto.png" />
            </a>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
            <a href="#">
                <img src="~/Content/Images/btnContato.png" />
            </a>
        </div>
    </div>

Answer 1

No need to mecher in css, just remove the class col-Xs-4 that refers to "Extra Small Devices", and so the Divs stay in rows and not in columns on devices smaller than 768px. Here comes the edited code:

   <div class="row">
    <div class="col-sm-4 col-md-4">
        <a href="#">
            <img src="~/Content/Images/btnHome.png" />
        </a>
    </div>
    <div class="col-sm-4 col-md-4">
        <a href="#">
            <img src="~/Content/Images/btnProduto.png" />
        </a>
    </div>
    <div class="col-sm-4 col-md-4">
        <a href="#">
            <img src="~/Content/Images/btnContato.png" />
        </a>
    </div>
</div>

Answer 2

Place float:left in the last two divs.