Html CSS Flexbox影响Bootstrap 3布局

我试图在Bootstrap3中创建下面的布局

我可以实现“sm”下显示的布局，我想用flexbox将div1和div2替换为xs屏幕。问题是，当我将包含的div设为flexbox时，它会向下推sm布局上的div 3，这样它就位于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]-->

如果我从包含div的类中删除“flexcontainer”，那么它就会恢复到我希望在上图中看到的状态。有没有办法解决这个问题，这样即使使用flexbox，我也可以获得正确的sm布局

我最初试图用砖石来解决这个问题，但是用flexbox来代替（我以前没有用过），所以希望我走上了正确的道路。如果不是。。任何指针都是伟大的

---

下面是一个包含媒体查询和flexbox排序的示例。

使用如下引导网格列

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

1.
2.
3.

---

演示：

像这样使用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>

1.
2.
3.

---

演示：

我只想说一个非常好的问题-非常好的解释、代码示例和图表。看一看……这是可能的，但很麻烦，很难实现良好的浏览器支持。我得到了，它在Firefox中工作。另见。解决这个问题的唯一方法是在行上设置一个固定的高度-这对您来说是可以接受的吗？在bootstrap 3中使用flexbox会破坏bootstrap的行-列响应行为。因此我觉得这不是解决方法。我是在另一个问题中建议flexbox的用户，而是最初的问题（如何使用同位素）从来都不清楚。尝试的代码与图片中的完全不同。目标是使#2 col在1和3之外达到全高吗？。整个场景应该是全视口高度吗？如果3的内容更高，会发生什么？它是滚动的，还是比2高？我想我不明白（正如我在最初的问题中没有理解的那样）为什么不这样使用引导呢如果这不是目标，请澄清问题。只想说一个很好的问题-很好的解释、代码示例和图表。看一看……这是可能的，但很麻烦，很难实现良好的浏览器支持。我得到了，它在Firefox中工作。另见。解决这个问题的唯一方法是在行上设置一个固定的高度-这对您来说是可以接受的吗？在bootstrap 3中使用flexbox会破坏bootstrap的行-列响应行为。因此我觉得这不是解决方法。我是在另一个问题中建议flexbox的用户，而是最初的问题（如何使用同位素）从来都不清楚。尝试的代码与图片中的完全不同。目标是使#2 col在1和3之外达到全高吗？。整个场景应该是全视口高度吗？如果3的内容更高，会发生什么？它是滚动的，还是比2高？我想我不明白（正如我在最初的问题中没有理解的那样）为什么不这样使用引导呢如果这不是目标，请澄清问题。