Порядок занятий в бутстрапе 3 - PullRequest
Новая
       5

Порядок занятий в бутстрапе 3

0 голосов
/ 03 июля 2018

У меня есть простой контейнер с одной строкой, которая содержит 6 элементов (div). Я пытаюсь изменить порядок элементов с помощью медиа-запроса.

Вот что у меня есть: 

    @media (min-width: 320px) and (max-width: 480px) {
        .product2{
          order: 3;
        }
        .products{
            display: flex;
            flex-direction: column;
        }
    }
<div class="row products">
        <div class="col-sm-6 col-md-4 product1">product1</div>
        <div class="col-sm-6 col-md-4 product2">product2</div>
        <div class="col-sm-6 col-md-4 product3">product3</div>
        <div class="col-sm-6 col-md-4 product4">product4</div>
        <div class="col-sm-6 col-md-4 product5">product5</div>
        <div class="col-sm-6 col-md-4 product6">product6</div>
    </div>

Я хочу, чтобы при размещении в одном ряду второй товар находился под третьим товаром.

Когда я запускаю мое приложение, отображается упорядоченный элемент, но вместо того, чтобы product2 помещался вместо третьего продукта, он помещается в последний элемент как product6.

Что не так с моими кодами? есть идеи?

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Я нашел решение, если кому-то будет интересно. Работает отлично, как я хотел. спасибо всем за поддержку Html 

<div class="row products">
        <div class="col-sm-6 col-md-4 product" id="product1">product1</div>
        <div class="col-sm-6 col-md-4 product" id="product2">product2</div>
        <div class="col-sm-6 col-md-4 product" id="product3">product3</div>
        <div class="col-sm-6 col-md-4 product" id="product4">product4</div>
        <div class="col-sm-6 col-md-4 product" id="product5">product5</div>
        <div class="col-sm-6 col-md-4 product" id="product6">product6</div>
    </div>

CSS 

   @media (min-width: 320px) and (max-width: 480px) {
        .products{
            display: flex;
            flex-direction: column;
        }
.product:nth-of-type(1) { order: 1; }
.product:nth-of-type(2) { order: 3; }
.product:nth-of-type(3) { order: 2; }
.product:nth-of-type(4) { order: 4; }
.product:nth-of-type(5) { order: 5; }
.product:nth-of-type(6) { order: 6; }

}
0 голосов
/ 03 июля 2018

Вы должны использовать идентификаторы. В CSS есть вещь, называемая специфичностью, которая в основном означает, какое правило имеет больший вес (и применяется).

Измените ваш HTML на: 

 <div class="row products">
    <div class="col-sm-6 col-md-4" id="product1">product1</div>

    <!-- rest of divs -->
</div>

и css to: 

div#product1 {
    /** your rules **/
}

это заменит стили класса.

вот документы MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

обновление после перечитывания вопроса

вы хотите использовать push и pull классы:

так что ваш HTML становится 

 <div class="row products">
    <div class="col-sm-6 col-md-4 col-sm-push-12" id="product1">product1</div>
    <div class="col-sm-6 col-md-4 col-sm-pull-12" id="product2">product2</div>

    <!-- rest of divs -->
</div>

Это выдвинет product1 под product2 в sm окнах просмотра, прочитайте все об этом: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering

...