Ponownie zamieniasz znaki div z narzędziem Twitter Bootstrap?

Question

Pracuję z Twitter Bootstrap v3 i chcę zmienić kolejność elementów w sposób responsywny, używając column ordering i offsetting.

Oto jak chciałbym wykorzystać moje elementy. Na -xs lub -sm przerwań z zawierającego div ułożone 4 wierszowi:

w -md lub -lg przerwań z zawierającego div ułożone 2 wierszowi:

To jest bieżący kod - wiem, jak ustawić klasy na zawierającej div, ale nie na A, B i C:

<div class="row"> 
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3"> 
     <div class="row"> 
     <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div> 
     <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div> 
     <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div> 
     </div> 
    </div> 
    ... more containing divs... 
    </div> 

Nie mogę wymyślić, jak uzyskać A, B i C we właściwej kolejności z Bootstrap 3: column ordering i offsetting. Czy to rzeczywiście możliwe?

To ile mam użyciem JSFiddle: http://jsfiddle.net/3vYgR/

Answer 1

myślę, że warto spojrzeć na zajęciach push i pull ...

<div class="row"> 
    <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div> 
    <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div> 
    <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div> 
</div> 

Demo: http://bootply.com/77853

Answer 2

żadnego powodu, aby nie używać bardziej tradycyjnych metod na to, tj. pływające B po lewej i inne elementy po prawej?

jak gdybyś dodał to do obecnego CSS w jsfiddle:

.b { 
    float: left; 
    width: 50%; 
    height: 100px; 
} 
.a, .c { 
    float: right; 
    width: 50%; 
    height: 50px; 
} 

Zobacz http://jsfiddle.net/E6BFk/

nie jestem pewien, że kolumna zamawiania Bootstrap mógłby osiągnąć efekt układania, może tylko ponownego zamawiania ... Chociaż ta dokumentacja jest dość cienka.

Answer 3

Próbowałem push/pull, jak pokazano na odpowiedź, ale szkielecika C kończy się w nowym wierszu, gdy zostaną zastosowane wysokości: http://www.bootply.com/Q3djHYawgb#

Jeśli B może być pokazany jako pierwszy, gdy jest pokazany w małym rozmiarze, to myślę, że bardziej sensowne jest utworzenie wiersza wewnątrz kolumny po prawej stronie zawierającego A i C:

<div class="containing row"> 
    <div class="b col-xs-12 col-md-6">Content of B</div> 
    <div class="ac col-xs-12 col-md-6"> 
     <div class="row"> 
      <div class="a col-xs-12">Content of A</div> 
     </div> 
     <div class="row"> 
      <div class="c col-xs-12">Content of C</div> 
     </div> 
    </div> 
</div> 

Zobacz http://jsfiddle.net/hoodoo99/L2BE9/

Answer 4

Odpowiedź udzielana przez @skelly to świetny punkt wyjścia, ale powoduje pewne problemy pionowe wyrównanie. Wyobraź sobie jest wysoki div, następnie C jest pionowo poniżej A .:

[A] [B] 
[ ] 
    [C] 

Ponadto, jeśli chcesz pójść o krok dalej, może trzeba także rozważyć użycie clearfix bloków.Na przykład;

<!-- Add clearfix for only the required viewport(s) --> 
<div class="clearfix visible-md-block visible-lg-block"></div> 

Bez clearfixmd lub lg może skończyć jako:

[A] [B] 
    [C] [D] 

Jest to szczególnie ważne, jeśli chcesz więcej niż 2 elementy w ostatecznym „kolumny”, lub wysokości elementów zacząć rzucać inne elementy niezgodne.

Z clearfixmd lub lg byłoby:

[A] [B] 
    [C] 
    [D] 

Przykład skrzypce: http://jsfiddle.net/L5174o8d/