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..

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

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