title: responsive row of images
body: <p>I have to include a row of 7 images on top of a colored div background.
  They should display in a row in a normal desktop but break nicely for smaller desktops with the background div following (some text is white otherwise you can't read it).</p>
  
  <p>With all I searched I didn't find a solution.</p>
  
  <p>That's what I have so far:</p>
  
  <pre><code>&lt;div class="login_footer container"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-8 col-sm-12" &gt;
                &lt;img class="img-responsive" src="/img/1.png" width="180px"/&gt; 
                &lt;img class="img-responsive" src="/img/2.png" width="120px" /&gt;
                &lt;img class="img-responsive" src="/img/3.png" width="120px"/&gt;
                &lt;img class="img-responsive" src="/img/4.png" width="120px"/&gt;
                &lt;img class="img-responsive" src="/img/5.png" width="120px"/&gt;
                &lt;img class="img-responsive" src="/img/6.png" width="120px"/&gt;
                &lt;img class="img-responsive" src="/img/7.png" width="120px"/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>With this settings the images simply stack - on the desktop.
  Am I too naive thinking that putting "img-responsive" would solve everything?
  Is setting the width of the images having a negative impact?
  The images are unfortunately not all of the same size and I'll have to fiddle there to make them look good.</p>
  
  <p>EDIT: a sketch of how I imagine things:</p>
  
  <p>desktop: </p>
  
  <pre><code>|   | img1 || img2 || img3 || img4 || img5 || img6 || img7 |   |
  </code></pre>
  
  <p>smaller display (possible responsive break example): </p>
  
  <pre><code>|  | img1 || img2 || img3 |
     | img4 || img5 || img6 |
     | img7 |
  |
  </code></pre>
  
  <p>small:</p>
  
  <pre><code>|  | img1 |
     | img2 |
     | img3 |
     | img4 |
     | img5 |
     | img6 |
     | img7 |
  |
  </code></pre>