Media queries do not apply when resized

Question

I have a media queries problem. I want to change the width property of container to 100% of page, but it's not applying. I use bootstrap as CSS framework. I give you a shot from inspector:

Code:

<div class="container-flex" id="blog-posts">
    <div class="post-left">
        <div>
            <img class="img-responsive" src="images/content/blog/post-image.jpg">
        </div>
    </div>
    <div class="divider">
        <div class="divider-dot"></div>
        <div class="divider-line"></div>
    </div>
    <div class="post-right">
        <div>
            <time>10 April 2014</time>
            <h3>Typi non habent claritatem insitam</h3>
            <p>Duis autem vel eum iriure dolor in hendreit in vulputate velit esse molestie consequat vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui [...]</p>
        </div>
    </div>
</div>

CSS:

@media only screen and (max-width : 767px) {
    #blog-posts {
        display: flex;
        flex-direction: column;
        width: 100%;
        border: 1px solid blue;

        .divider {
            display: none;
        }

        .post-left {
            ;
            width: 100%;

            div {
                //width: 100%;
                border: 1px solid;
            }
        }

        .post-right {
            width: 100%;

            div {
                width: 100%;
                border: 1px solid;
            }
        }
    }
}

...

#blog-posts {
    display: flex;

    .post-left {
        width: 47.95%;
        //border: 1px solid blue;
        div {
            width: 50%;
            float: right;

            img {
                float: right;
            }
        }
    }

    .divider {
        //border: 1px solid;
        width: 4.1%;

        .divider-dot {
            border-radius: 50%;
            background-color: rgb(235, 235, 235);
            width: 17px;
            height: 17px;
            margin: 0 auto;
        }

        .divider-line {
            width: 1px;
            height: 100%;
            background-color: rgb(235, 235, 235);
            margin: 0 auto;
        }
    }

    .post-right {
        //border: 1px solid green;
        width: 47.95%;

        div {
            width: 50%;

            time {
                font-size: 16px;
                font-family: "Raleway";
                color: rgb(123, 108, 99);
                line-height: 1.875;
                text-align: left;
            }

            h3 {
                font-size: 24px;
                font-family: "Raleway";
                color: rgb(33, 33, 33);
                line-height: 1.25;
                text-align: left;
            }

            p {
                font-size: 16px;
                font-family: "Raleway";
                color: rgb(148, 148, 148);
                line-height: 1.875;
                text-align: left;
            }
        }
    }
}

Answer 1

As already stated in the comments: media-queries should come after your default styles. Since they have to overwrite them.

Your code:

@media only screen and (max-width : 767px) {
  #blog-posts{
    // styles...
  }
}

#blog-posts{
  // styles...
}

Should be:

#blog-posts{
  // styles...
}

@media only screen and (max-width : 767px) {
  #blog-posts{
    // styles...
  }
}

---

You can simply demonstrate this behavior by overwriting a class

div {
  height: 100px;
  width: 100px;
}
.color {
  background: red;
}
.color {
  background: green;
}

<div class="color"></div>

As you can see, the block is green instead of red.

You can apply the same rule to media-queries, with the exception that they only apply when the viewport is larger than the given size.