Css media queries - conflict with Bootstrap 3 - css

Question

I have a div with display:none (mobile first approach):
#my_div {
display: none;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
I use some media queries (after in the css) to display this div with some padding and font-size:
/* Between 600px and 649px */
#media (min-width: 600px) and (max-width: 649px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
/* Between 650px and 699px */
#media (min-width:650px) and (max-width:699px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}​
/* Between 700px and 914px */
#media (min-width: 700px) and (max-width: 914px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
All works well until 699px. The third media query is not applied and the div isn't displayed.
If I use the following media queries, the div is displayed, but #media (min-width: 700px) is not applied. The #media (min-width:650px) is applied:
#media (min-width: 600px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
#media (min-width:650px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}​
#media (min-width: 700px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
By using the chrome inspector I can see that over 700px it's applied the rule:
#my_div {
display: none;
...
}
EDIT
I have added one more media query
#my_div {
display: none;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#media (min-width: 600px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
#media (min-width:650px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}​
#media (min-width: 768px) {
#my_div {
display: none; /* it doesn't work, also with !important */
}
}
#media (min-width: 915px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
The only rule that is not applied is #media (min-width: 768px).
In my CSS, there aren't other rules that affect the display of my_div div. I'm using Bootstrap 3.
EDIT 2
I added the Bootstrap hidden-sm class to the div my_div:
<div id="my_div" class="hidden-sm"><strong>My slogan</strong></div>
In this way the div isn't displayed between 768px and 991px, but I would to display it again from 915px.
SOLUTION
I updated the JSfiddle by AngelosCharalis and, by copying and paste my code, I found an invisible dot character. Now it works.

Answer 1

First you must start from the highest pixel.
#media (max-width: 914px) {
#myId {
}
}
#media (max-width: 699px) {
#myId {
}
}
#media (max-width: 649px) {
#myId {
}
}
#media (max-width: 599px) {
#myId {
}
}