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

Question

我对引导程序 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>

Answer 2

你只需要从portfolio-text类中删除属性display: flex，引导程序就会处理它。