css - 使用display : flex?如何实现响应式设计

Question

我对 bootstrap 3.3.7 中的响应式设计有疑问

这是一行，我在第一列有一些文本，在第二列有一张图片。

    .portfolio-text {
        display: flex;
        align-items: center;
        justify-content: center;
    }

 <div class="row portfolio-text">
        <div class="col-sm-7 col-sm-offset-1">
            <p>text</p>
        </div>
        <div class="col-sm-4 ">
            <img src="{{ url_for('static', filename="img/advice-public-post.png") }}" class="img-responsive"
                 alt="Advice on public posts">
        </div>
    </div>

它在桌面上看起来不错，但在我的 iPhone 上我得到的图像非常小，而且旁边的文字也被弄乱了。我本来希望图像和文本分别位于单独的行中，彼此下方以留出足够的空间。您可以在智能手机上尝试我的网站以亲自查看:http://moodimo.com

可能是 display: flex; 阻止了响应式设计？我能做什么？

Answer 1

只需添加flex-flow:row wrap

.portfolio-text {
  display: flex;
  align-items: center;
  justify-content: space-around;   /* instead of center */  
  flex-flow: row wrap;   /* Added */
}

<div class="row portfolio-text">
  <div class="col-sm-8">
    <p>text</p>
  </div>
  <div class="col-sm-4 ">
    <img src="http://lorempixel.com/400/200" class="img-responsive" alt="Advice on public posts">
  </div>
</div>