2013-08-29 5 views
9

Przed uruchomieniem bootstrap 2 można odwrócić kolejność układania w siatkę, odwracając ruchy.Kolejność odwracania stosu w bootstrap 3?

W bootstrap 3 wydaje się, że to nie działa. Czy ktoś może mi powiedzieć rozwiązania dla bootstrap 3?

Każda pomoc zostanie doceniona. .

+0

Próbowałem odwrócić pływaków na ich przykładach, pracował jak czar. coś innego może być dla ciebie złe. – Razz

+0

Pętle rewersyjne nie działają w Bootstrap 3, potwierdzone. Odpowiedź Bass Jobsena poniżej jest poprawna. – Brant

Odpowiedz

15

użyć klas modyfikujące .col-md-push-* i .col-md-pull-*, patrz: http://getbootstrap.com/css/#grid-column-ordering

przykład:

<div class="container"> 
<div class="col-sm-5 col-sm-push-7" style="height:50px;background-color:green;">first right</div> 
<div class="col-sm-7 col-sm-pull-5" style="height:100px;background-color:red;">second left</div> 
</div> 
2

w Bootstrap 3 można użyć Col-MD-podania dawki i koledzy md-pull-.
Oto pełny kod.
Mam nadzieję, że rozwiąże to Twój problem.

<html><head> 
 
\t <title>Bootstrap in practice: the grid system</title> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t <!-- Bootstrap CSS --> 
 
\t <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 
 

 
\t <!-- To better visualize the columns --> 
 
\t <style> 
 
\t .row > div { 
 
\t \t background-color: #dedef8; 
 
\t \t box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444; 
 
\t } 
 
\t </style> 
 

 
</head> 
 
<body> 
 
<div class="container"> 
 

 
\t <h1>Hello, world!</h1> 
 

 
\t <div class="row"> 
 
\t \t <div class="col-md-4 col-md-push-8">I was left</div> 
 
\t \t <div class="col-md-8 col-md-pull-4">I was right</div> 
 
\t </div> 
 
</div> 
 

 
</body></html>

uruchomić ten kod w oddzielnej stronie HTML

Oto migawka enter image description here