✔ Bootstrap HeadLine - Disable Images

[Cäptin Pommes]

Hallo Leute,

ich habe eine Headline die in 3 Teile unterteilt sind (3 Bilder). Das Linke und das Rechte Bild sollen allerdings nicht mehr angezeigt werden, wenn der Platz zu gering wird(Smartphones etc...)
Ich bin generell recht grün hinter den Ohren wenns um Webseiten geht und mit Bootstrap hab ich Heute auch erst angefangen. Ich hab diverse Spalten Kombinationen ausprobiert mit xs, md, etc ... hat leider nicht funktioniert.
Hier mal der Code:

<div class="container headLine">
        <div class="row">

            <div class="col-md-3">
                <img class="img-responsive headImg" src="~/Content/img/singer.jpg" />
            </div>

            <div class="col-md-6">
                <img class="img-responsive headImg center-block" src="~/Content/img/mainLogo.png" />
            </div>

            <div class="col-md-3">
                <img class="img-responsive headImg imgFlip" style="float:right" src="~/Content/img/female-singer.jpg" />
            </div>

        </div>
.
.
.

Die beiden äußeren Bilder sollen dann bei zu geringen Platz verschwinden, also die, die sich momentan in "col-md-3" befinden.
Kann mir da einer helfen? Wäre euch sehr verbunden!

 

[SpiceLab]

Für Smartphones:

<div class="container headLine">
  <div class="row">
    <div class="col-md-3 hidden-xs">
      ...
    </div>
    <div class="col-md-6">
      ...
    </div>
    <div class="col-md-3 hidden-xs">
      ...
    </div>
  </div>
</div>

Falls Tablets mit einbezogen werden sollen:

<div class="container headLine">
  <div class="row">
    <div class="col-md-3 hidden-xs hidden-sm">
      ...
    </div>
    <div class="col-md-6">
      ...
    </div>
    <div class="col-md-3 hidden-xs hidden-sm">
      ...
    </div>
  </div>
</div>

http://getbootstrap.com/css/#responsive-utilities-classes

 

[Jan-Frederik Stieler]

Hi,
Nur so am Rande damit du nicht den gleichen Fehler eine Weile begehst wie ich, die Grid Helfer Klassen push und pull sind sehr hilfreich wenn mankomplexere Veränderungen bei den Elementen bei unterschiedlichen Gerätegrößen erzeugen will.

Grüße

 

[SpiceLab]

Nur so am Rande damit du nicht den gleichen Fehler eine Weile begehst wie ich, die Grid Helfer Klassen push und pull sind sehr hilfreich wenn mankomplexere Veränderungen bei den Elementen bei unterschiedlichen Gerätegrößen erzeugen will.

Stichwort: Column ordering

Anwendungsbeispiel: https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

 

[Cäptin Pommes]

Perfekt, vielen dank Leute!

 

[Pixelsu]

hier noch ein Link .... ist oft besser zu verstehen , wenn man es in D bekommt.
http://holdirbootstrap.de/komponenten/
gruss Su

 

[SpiceLab]

hier noch ein Link .... ist oft besser zu verstehen , wenn man es in D bekommt.
http://holdirbootstrap.de/komponenten/
gruss Su

Wenn schon in deutsch, dann:

1. http://holdirbootstrap.de/css/#responsive-utilities-classes
2. http://holdirbootstrap.de/css/#grid-column-ordering

 

[Pixelsu]

jo, sorry ... habe nur auf die deutsche Seite überhaupt hingewiesen .