CSS Flexbox affecting Bootstrap 3 layout

Question

I am trying to create a layout below in Bootstrap 3.

I can create the layout shown under "sm" and with flexbox I want to swap divs 1 and 2 for xs screens. The problem is that when I make the containing div a flexbox, it pushes div 3 onto the sm layout, so that it is under div 2.

<!--[2 Column]-->
  <div class="row flex-container">


    <!--[DIV 2]-->
    <div class="col-xs-12 col-sm-4 flex-item">
      <p class="portfolio-content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
      </p>
    </div>
    <!--[/DIV 2]-->


    <!--[DIV 1]-->
    <div class="col-xs-12 col-sm-8 flex-item">

      <!-- main image-->
      <img class="img mb-20" src="img/6.jpg"/>

    </div>
    <!--[/DIV 1]-->


    <!--[DIV 3]-->
    <div class="col-xs-12 col-sm-8 flex-item">
      <img class="img" src="img/1.jpg"/>
      <img class="img" src="img/2.jpg"/>
      <img class="img" src="img/3.jpg"/>
    </div>
    <!--[/DIV 3]-->

  </div>
  <!--/[2 Column]-->

And CSS

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

If I remove the 'flex-container' from my containing div class then it will revert to what I would like it to be in the picture above. Is there a way to solve this problem so that I can have the correct layout for sm, even using flexbox?

, qaru.site/questions/1672266/... flexbox ( ), , , . , !

JS Fiddle flexbox.

Answer 1

Boostrap, .

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

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