如何在使用顯示器時實現響應式設計：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，引導程序將負責處理它。