Ordering classes in bootstrap 3

问题:

I have simple container with one row which holds 6 elements (divs). I am struggling to reorder elements using media query.

Here is what I have so far:

    @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>

I want in such a way that when placed in a single row, the second product is under the third product.

When I run my app displays reordered element but instead of product2 being placed at the place of the third product its placed in last element as product6.

What is wrong with my codes? any idea?

回答1:

You should use ID's. In CSS there is a thing called specificity which basically means, which rule holds most weight (and gets applied).

Change your HTML to:

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

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

and css to:

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

this will override class stylings.

here's MDN docs on it: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

update after re-reading question

you want to use push and pull classes:

so your HTML becomes

 <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>

This will push product1 underneath product2 on sm viewports, read all about it: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering

回答2:

I found the solution if some one will be interested. Works perfect as I wanted. thanks all for the support 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; }

}