如何在使用显示器时实现响应式设计：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，引导程序将负责处理它。