Bilder nebeneinander Footer-Header

Mach aus deinem Code mal folgendes:

HTML:

<div class="clearfix">
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-4">
                <h4>Sicher bezahlen</h4>
            </div>

            <div class="col-sm-8">
                <div class="col-sm-6">
                    <img class="img-responsive" src="images/logo_amazonpay-primary-fullcolor-positive.png"/>
                </div>
                <div class="col-sm-6">
                    <img class="img-responsive" src="images/index1.png"/>
                </div>
            </div>
        </div>
    </div>
</div>

Das sollte dafür sorgen, dass die Bilder sich am Gridsystem in ihrer Größe orientieren und, dass sie nebeneinander stehen. In deinem bisherigen Beispiel haben die Bilder noch absolute Größenangaben für Breite und Höhe, die das automatische Skalieren verhindern.

 

Du hast immer noch eine feste Größe im Code.
<img class="img-responsive" src="images/dhl-gogreenlogo.png" style="width: 200px; height: 41px;" />

Dann habe ich auf dem PC-Monitor die Social-Button genau da, wo "Sicher bezahlen" steht.

Dann sind die originalen Bilder viel zu riesig. Das ist unnötige Ladezeit.
Nehmen wir z.B. das von DHL, das ist im Original 800 x 162px groß
Mache Die Bilder nur so groß, wie sei auch angezeigt werden sollen.

Versuche es mal damit:

HTML:

<div class="clearfix">
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-2">
                <h4>co2 neutraler Versand</h4>
            </div>
            <div class="col-sm-2">
                    <img class="img-responsive" src="images/dhl-gogreenlogo.png" />
            </div>
       
                             <div class="col-sm-2">
                                <h4>Sicher bezahlen</h4>
                            </div>

                            <div class="col-sm-6">
                                <div class="col-sm-4">
                                    <img class="img-responsive" src="images/logo_amazonpay-primary-fullcolor-positive.png" />
                                </div>

                                <div class="col-sm-8">
                                    <img class="img-responsive" src="images/index1.png" />
                                </div>
                            </div>
        </div>
    </div>
</div>

die Werte müssen eventuell noch mal angepasst werden, aber so habe ich es alles in einer Reihe.

 

Du solltest Du Bilder kleiner machen, das erschlägt einen auf einem kleinen Monitor:

Man könnte die Social-Button etwas verschieben, sie werden aber immer irgendwo im Weg sein, gerade wenn der Bildschirm kleiner wird.

Ich würde die entweder richtig in die Footer-Spalte setzten, oder als Sidebar einfügen.