Wie erreiche ich Responsive Design bei der Verwendung von Display: flex?

Question

Ich habe ein Problem mit dem Responsive Design in Bootstrap 3.3.7

Dies ist eine Zeile, wo ich ein wenig Text in der ersten Spalte und ein Bild in der zweiten Spalte haben.

.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>

Es auf dem Desktop sieht gut aus, aber auf meinem iPhone Ich bekomme sehr kleine Bilder und der Text daneben gepfuscht wird. Ich hätte erwartet, dass das Bild und der Text jeweils in einer separaten Reihe nebeneinander liegen, um genügend Platz zu schaffen. Sie können versuchen, meine Website auf Ihrem Smartphone für sich selbst zu sehen: http://moodimo.com

Könnte es sein, dass display: flex; reagiert Design verhindert? Was kann ich tun?

Answer 1

Fügen Sie einfach 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

Sie müssen nur das Attribut display: flex aus der portfolio-text Klasse entfernen und Bootstrap wird sich darum kümmern.