Как изменить порядок отображения элементов с помощью Bootstrap 3

Question

может кто-нибудь мне помочь Я пытаюсь подумать, как я могу это сделать, используя бутстрап, у кого есть ключ? Я не знаю, как вы можете изменить порядок отображения элементов, я думаю, его игра вокруг с поплавками и очистки. Пожалуйста, помогите, мне нужна помощь. Я использую Bootstrap 3 для гибких макетов, как вы можете изменить порядок отображения только с помощью css?

Answer 1

@skelly право вы можете использовать тяговый и толкающие классы, чтобы изменить порядок отображения элементов. Эти классы не всегда дают вам правильное решение.

Есть много других вопросов по этому поводу, смотри, например: Need to be able to swap grid on mobile

Потому что вы хотите изменить ширину строки 100% (желтая строка) в мобильном (хз сетке)/вид таблетки (мД сетки) вы не можете решить это с помощью плавающего и/или нажмите и вытащите.

Я также считаю, что вы не можете делать thsi с CSS только без фиксации некоторых параметров.

Когда я считать высоту некоторых из ваших известных элементов/фиксированной для различных точек зрения, я могу решить эту проблему с помощью CSS и медиа-запросов: http://bootply.com/85303

CSS:

@media (max-width: 768px) 
{ 
.yellow {margin-top:-60px;} 
.orange {margin-top:40px;} 
.col-xs-12{float:left;} 
} 
@media (min-width: 992px) and (max-width:1199px) 
{ 
    .col-md-12 {float:left;} 
    .darkgreen{float:right; margin-top:-60px;} 
} 
@media (min-width: 1200px) 
{ 
.blue{margin-top:-60px} 
} 

HTML :

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-xs-12" style="background-color:red;">&nbsp;</div> 
    </div> 

    <div class="row"> 
    <div class="orange col-lg-12 col-md-8 col-xs-12" style="background-color:orange;">&nbsp;</div> 
    <div class="yellow col-lg-8 col-md-12 col-xs-12" style=""> 
    <div class="row"> 
     <div class="col-lg-6 col-xs-12" style="background-color:yellow;height:40px;">1</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">2</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">3</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">4</div> 
    </div> 
    </div> 
    <div class="darkgreen col-lg-4 col-md-4 col-xs-12" style="background-color:darkgreen;">&nbsp;</div> 
    <div class="pink col-lg-8 col-md-12 col-xs-12" style="background-color:pink;">&nbsp;</div> 
    <div class="blue col-lg-4 col-md-12 col-xs-12" style="background-color:blue;height:40px;">&nbsp;</div> 
    </div> 

</div> 

Примечание: некоторые элементы являются чанг путем добавления (отрицательного) верхнего поля. Я могу сделать это только тогда, когда я знаю их рост. Также обратите внимание, что я добавляю float: left для col-xs-12 и col-xs-12.

В реальной ситуации, когда вы не знаете высоту, вы можете попытаться вычислить ее с помощью javascript (используйте response.js для media queriesmaybe) и добавьте верхние поля. Я не знаю, даст ли это вам лучшее решение, когда вы используете jQuery для управления вашей DOM, см.: Add new row and changing column classes on resize