CSS Flexbox Affecting Bootstrap 3 Layout

I'm trying to create the layout below in Bootstrap 3. I can achieve layout shown under 'sm', and with flexbox I want to swap div 1 and 2 for xs screens. The problem is when I make

Solution 1:

Use the Boostrap grid columns like this..

<div class="container-fluid">
    <div class="row">
    <div class="col-xs-12 col-md-4 pull-right">
        <div class="well"> 
          <h4>1</h4>
        </div>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="well tall"> 
          <h4>2</h4>
        </div>
      </div>
      <div class="col-xs-12 col-md-4 pull-right">
        <div class="well"> 
          3
        </div>
      </div>
   </div>
</div>

Demo: http://www.codeply.com/go/94pLz9xLab