CSS Flexbox 影响 Bootstrap 3 布局答案

【问题标题】：CSS Flexbox affecting Bootstrap 3 layoutCSS Flexbox 影响 Bootstrap 3 布局
【发布时间】：2017-08-04 23:26:56
【问题描述】：

我正在尝试在 Bootstrap 3 中创建以下布局。

我可以实现“sm”下显示的布局，并且使用 flexbox 我想将 div 1 和 2 交换为 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]-->

还有 CSS

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

如果我从包含的 div 类中删除“flex-container”，它就会恢复到我希望它出现在上图中的状态。有没有办法解决这个问题，即使使用 flexbox，我也可以为 sm 设置正确的布局？

我最初尝试使用 Masonry 来解决这个问题，但使用 Stackoverflow user suggested flexbox 代替（我以前没有使用过）所以希望我走在正确的轨道上。如果没有.. 任何指针都会很棒！

这是一个JS Fiddle，其中包含媒体查询和弹性盒排序。

【问题讨论】：

只想说一个很好的问题——很好的解释、代码示例和图表。看看...
这是可能的，但是很麻烦并且很难实现良好的浏览器支持。我得到了this far，它适用于 Firefox。另见this question。解决这个问题的唯一方法是在行上设置一个固定的高度 - 这对你来说是可以接受的吗？
在引导程序 3 中使用 flexbox 会破坏引导程序的行列响应行为。所以我觉得这不是要走的路。
我是在另一个问题中建议使用 flexbox 的用户，但最初的问题（如何使用同位素）一直不清楚。尝试的代码看起来与图片完全不同。目标是在 1 和 3 旁边使 #2 col 全高吗？整个东西应该是完整的视口高度吗？如果 3 的内容更高会怎样？它会滚动，还是延伸到 2 的高度？
我想我不明白（因为我在最初的问题中没有）为什么不像这样使用 Bootstrap？ codeply.com/go/94pLz9xLab __ 如果这不是目标，请澄清问题。

标签： html twitter-bootstrap css flexbox

【解决方案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

【讨论】：