Bootstrap-Gitterelemente verschieben

Question

Nehmen wir an, wir haben zwei Bootstrap-Sektionen. Der erste hat ein Logo drin. Der zweite Teil ist in zwei weitere Bootstrap-Abschnitte unterteilt. Genau wie diese ..

<div class="col-md-3"> 
<img src="logo.png"> 
</div> 

<div class="col-md-9"> 
<div class="col-md-12"> 
    <i class="fa fa-phone"></i> 
    <i class="fa fa-marker"></i> 
</div> 
<div class="col-md-12"> 
    //Navbar 
</div> 
</div> 

Jetzt ist mein Kunde fordert die Schrift ehrfürchtigen Schriftschnitt zeigt, in Navigationsbereich auf mobilen Blick hinter nav Links hinzuzufügen. Bitte sehen Sie Screenshot. Soziale Symbole in einem anderen Div-Bereich platziert. Also kann ich es nicht zu Nav-Links bewegen. Aber ich habe es mit Medienbrüchen versucht. Fügen Sie soziale Symbole als Navigationslink hinzu. Verstecken Sie es auf dem normalen Bildschirm, zeigt es in der mobilen Ansicht an. Ist das der richtige Weg, um meine Anforderung zu erfüllen?

Answer 1

ausblenden es auf normalen Bildschirm, zeigt sie auf mobilen Ansicht. Ist das das legitime Weg, um meine Anforderung zu erfüllen?

Werfen Sie einen Blick auf die ansprechenden Abschnitt Dienstprogramme auf der getBootstrap Website

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

Sie Klassen/auszublenden Elemente zeigen, können auf Bildschirmgröße abhängig. In deinem Fall hättest du deine sozialen Symbole in einem div mit versteckten sm versteckten md hidden-lg Klassen.

Alle Elemente in diesem div sind ausgeblendet, bis der Bildschirm am kleinsten ist, geeignet für Smartphones.

Answer 2

die Klassen Bootstrap verwenden:

.hidden-sm 
.hidden-md 
.hidden-lg 

Wird auf diesen Medien-Anfragen verstecken, können Sie auch * verwenden .visible- können (* - sm, md, lg), die das Gegenteil.

Auf einer Seite zur Kenntnis, würde ich vorschlagen, Zeilen zu verwenden, um Ihre Spalten zu trennen:

<div class="row"> 
    <div class="col-md-3"> 
     <img src="logo.png"> 
    </div> 

    <div class="col-md-9"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <i class="fa fa-phone"></i> 
       <i class="fa fa-marker"></i> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       //Navbar 
      </div> 
     </div> 
    </div> 
</div> 

Inline-Aufenthalte mit Bootstrap :)