Jak podzielić kolumnę w widoku elastycznym za pomocą Bootstrap?

Question

Używam Bootstrap v4 a4

Obecnie mam:

.row 
    .col-xs-12.col-md-8 
    div A 
    .col-xs-12.col-md-4 
    div B 
    div C 

dla układu xs, chciałbym kolejność div być:

Div B 
Div A 
Div C 

mam nie mam pojęcia, jak to zrobić lub jak o to zapytać. Nie jestem programistą front-end, więc nie wiem, jak się nazywa.

Możemy zmienić kod HTML na dowolny, jaki chcemy. Nie musi być ani muszą pozostać takie, jak jest teraz.

Answer 1

Bootstrap ma column ordering classes, ale w tym przypadku można po prostu użyć responsive float classes ..

<div class="row"> 
    <div class="col-md-4 pull-md-right"> 
     b 
    </div> 
    <div class="col-md-8"> 
     a 
    </div> 
    <div class="col-md-4"> 
     c 
    </div> 
</div> 

http://www.codeply.com/go/XL5zJELyLD

Answer 2

Zamiast schematu flexbox użyłem kombinacji float i position właściwości CSS, aby uzyskać oczekiwany rezultat. Zakładając dużą szerokość jako 150px i małą szerokość jako 100px.

Working Fiddle

.container { 
 
    width: 250px; 
 
    position: relative; 
 
} 
 
.blue { 
 
    width: 150px; 
 
    height: 300px; 
 
    background: blue; 
 
    position: absolute; 
 
} 
 
.pink { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: pink; 
 
    float: right; 
 
} 
 
.green { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
    clear: right; 
 
    float: right; 
 
} 
 
@media (max-width: 450px) { 
 
    .blue { 
 
    position: relative; 
 
    } 
 
    .green, 
 
    .pink { 
 
    float: none; 
 
    width: 150px; 
 
    } 
 
}

<div class="container"> 
 

 
    <div class="pink"></div> 
 
    <div class="blue"></div> 
 
    <div class="green"></div> 
 
</div>

Answer 3

Używając klas od bootstrap i ogólnego stylu możesz osiągnąć to tak, jak zrobiłem to w tym piórze.

http://codepen.io/TunderScripts/pen/PGadpr

Html:

<div class="row"> 
    <div class="col-xs-12 col-md-4 pull-right col1"></div> 
    <div class="col-xs-12 col-md-8 pull-left col2"></div> 
    <div class="col-xs-12 col-md-4 pull-right col3"></div> 
</div> 

css:

.col1{ 
    background: red; 
    height: 200px; 
} 
.col2{ 
    background: blue; 
    height: 600px; 
} 
.col3{ 
    background: green; 
    height: 200px; 
} 

Można zmienić domyślne zachowanie za pomocą swoich klas dla pływaków (pull-lewo, pull-prawy) .

Answer 4

Zgodnie z obietnicą, prosty draft

HTML

<div class="row"> 
    <div class="col1">DIV A</div> 
    <div class="col2">DIV B</div> 
    <div class="col3">DIV C</div> 
</div> 

CSS

.row { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    justify-content: space-between; 
    width: 400px; 
    margin: 0 auto; 
} 

.col1 { 
    width: 200px; 
    height: 400px; 
    background-color: #86a0ff; 
} 

.col2 { 
    width: 150px; 
    height: 150px; 
    background-color: #ff6cde; 
} 

.col3 { 
    margin-top: -200px; 
    margin-left: auto; 
    width: 150px; 
    height: 150px; 
    background-color: #35af6d; 
} 

@media (max-width: 768px) { 
    .row { 
    justify-content: center; 
    flex-direction: column; 
    } 

    .col1 { 
    order: 2; 
    width: 200px; 
    margin-top: 50px; 
    } 

    .col2 { 
    order: 1; 
    width: 200px; 
    } 

    .col3 { 
    order: 3; 
    width: 200px; 
    margin-top: 50px; 
    margin-left: 0; 
    } 
} 

chodzi o wyjaśnienie, tutaj jest wielki guide do schematu flexbox. Główną ideą w moim przykładzie jest to, że za pomocą właściwości zamówienia można manipulować kolejnością wyświetlania bloków. Głównym plusem korzystania z flexboxa jest to, że nie musisz ładować żadnej biblioteki (takiej jak Bootstrap), aby osiągnąć pożądany rezultat, taki jak czas reakcji.Ma też dobrą przeglądarkę support, chyba że potrzebujesz obsługi starszych wersji przeglądarek. Mam nadzieję, że moja odpowiedź będzie dla ciebie pomocna!