Wie wird die Spalte je nach Bildschirmgröße bestellt?

Ich mag folgendes Layout für mittlere Bildschirmgröße tunWie wird die Spalte je nach Bildschirmgröße bestellt?

<div class="col-md-12">A</div> 
<div class="col-md-12">B</div> 
<div class="col-md-12">C</div> 

[A-12] 
[B-12] 
[C-12]

Ich mag zuerst das folgende Layout für große Bildschirmgröße tun

<div class="col-lg-9>A</div> 
<div class="col-lg-3>C</div> 
<div class="col-lg-9>B</div> 

[A-9][C-3] 
[B-9]

Ich tue meinem kleines Screen-Design (da es soll zuerst mobil sein, oder?), dann versuche ich B/C zu drücken/ziehen, um C direkt neben A zu setzen. Aber es funktioniert nicht.

<div class="col-md-12 col-lg-9">A</div> 
<div class="col-md-12 col-lg-9 col-lg-push-3">B</div> 
<div class="col-md-12 col-lg-3 col-lg-pull-9">C</div> 

//Expected result 
[A-9][C-3] 
[B-9] 

//Result I'm getting 
[A-9] 
[C-3][B-9]

Also, wie soll ich mein Layout tun, um das erwartete Ergebnis zu erhalten?

Quelle

2014-09-15 Gudradain

Versuchen Zusatz '.col-md-Push-0 'auf die '.col-lg-push- *' divs. – beercodebeer

die Frage ist nicht klar. Indem du nur deinen ersten Code verwendest (nur das Col-lg) bekommst du das gewünschte Verhalten. Ich weiß nicht, warum Sie unten eine col-9 wollen, also sollten Sie erklären, was mit diesem 3-col leeren Platz passiert und wie wollen Sie mit dieser col-9 umgehen (Sie erwähnen push/pull, was totale Gegensätze sind). Trotzdem bin ich mir sicher, dass es ganz einfach ist, es einfach nicht von deiner Erklärung zu verstehen. Und ich denke, Sie verwirren, wie BS funktioniert, wie wir sind, überprüfen Sie die Raster Doc wie @isherwood Erwähnungen – Devin

@ TheLittlePig die Antwort ist richtig. Vergessen Sie Push/Pull für diesen Zweck (und die meisten Zwecke). Sie bewegen die Dinge wirklich nur seitlich, nicht auf und ab. –

ist hier so etwas wie ich nehme an, Sie wollen:

Bootply: http://www.bootply.com/zu6yDOeHwn

HTML:

<div class="container"> 
    <div class="col-md-12 col-lg-9"> 
    <div class="row"> 
      <div class="col-md-12 ">A</div> 
     <div class="col-md-12">B</div> 
    </div> 
    </div> 
    <div class="col-md-12 col-lg-3">C</div> 
</div>

Quelle

2014-09-15 18:13:45 pbenard

Wie wird die Spalte je nach Bildschirmgröße bestellt?

Antwort

Verwandte Themen