Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid)

Question

I\'m using Twitter Bootstrap 3 to create a mobile-ready website. On a large screen, I\'d like two items (#1 and #2 in my sketch) to be in a sidebar to the left, while the la

Answer 1

Try to float to the right: (see: http://bootply.com/78158)

CSS:

.floatright{float:right;}
@media (max-width: 768px)
{    
    .floatright{float:none;}
}   

HTML:

<div class="container"> 
<div class="col-sm-5" style="height:50px;background-color:green;">1</div>
<div class="col-sm-7 floatright" style="height:100px;background-color:red;">3</div>
<div class="col-sm-5" style="height:50px;background-color:green;">2</div>
</div>

Answer 2

Would you settle for (on mobile) 3,1,2?

http://jsfiddle.net/chevybowtie/n9Ett/3/

<div class="container">
<div class="row">
    <div class="col-md-8 col-md-push-4 r">
        <p>#3 </p>
        <p></p>
    </div>
    <div class="col-md-4 col-md-pull-8">
        <div class="col-md-12 r"><p>#1 </p></div>
        <div class="col-md-12 r"><p>#2 </p></div>
    </div>
</div>
</div>