Columns in Bootstrap

Question

This is what I have at the moment on a on small devices.

This is the code for the image above.

<div class="row">
    <div class="col-sm-6">
        <div class="alert alert-info">Chart 1</div>
    </div>
    <div class="col-sm-6">
        <div class="alert alert-info">Chart 2</div>
    </div>
    <div class="col-sm-12">
        <div class="alert alert-danger">Legend</div>
    </div>
</div>

When this is shown on an extra small device the order is like this:

Chart 1
Chart 2
Legend

This is expected but not what I'm after. I want it to be like this:

Chart 1
Legend
Chart 2

Is this possible using Bootstrap?

Answer 1

Here is your fixed code

<div class="row">
    <div class="col-sm-6">
        <div class="alert alert-info">Chart 1</div>
    </div>
     <div class="visible-sm visible-xs hidden-md hidden-lg">
         <div class="col-sm-12">
        <div class="alert alert-danger">Legend</div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="alert alert-info">Chart 2</div>
    </div>
    <div class="hidden-sm hidden-xs visible-md visible-lg">
    <div class="col-sm-12">
        <div class="alert alert-danger">Legend</div>
    </div>
    </div>
</div>

Cheers !