title: Media queries not working in Bootstrap with some classes, but with others it does
body: <p>I have media queries, but for some reason for one particular class doesn't works. I'm using Bootstrap modals for this. I would need this to work best at 420 width.</p>
  <p>Here is my CSS code:</p>
  <pre><code>@media (min-width: 768px) { 
      .caracs{
      width: 500px !important;
      font-family: 'Poppins', sans-serif;
      } 
      .panel{
      text-align: center;
      height: 255px;
      }
      .nombre-datos{
          display: inline-block;
          font-size: 0.8em;
          text-align: justify;
      }
  }
  @media (min-width: 992px) { 
      .caracs{
          width: 810px !important;
          font-family: 'Poppins', sans-serif;
      }
      .nombre-datos{
          display: inline-block;
          font-size: 0.8em;
          text-align: justify;
      }
      
  }
  @media (min-width: 1200px) { 
      .caracs{
      width: 810px !important;
      font-family: 'Poppins', sans-serif;
      }
      .panel{
          text-align: center;
          height: 165px;
      }
  }
  </code></pre>
  <p>Specifically I need:</p>
  <pre><code>.nombre-datos{
      display: inline-block; /*Necesario para que los divs estén en el mismo renglón*/
      width: 250px !important;
      font-size: 0.8em;
      text-align: justify;
  }
  </code></pre>
  <p>To change. I want to remove the <em>width: 250px !important</em> property on small screens, tho when I resize the window in my browser it doesn't works at all.</p>
  <p>Here are some pics:</p>
  <p>This is how it looks on normal screen view:</p>
  <p><a href="https://i.stack.imgur.com/mDswB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mDswB.jpg" alt="enter image description here" /></a></p>
  <p>Here is how it looks responsive to small devices:</p>
  <p><a href="https://i.stack.imgur.com/kd8EG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kd8EG.jpg" alt="enter image description here" /></a></p>
  <p>Here it is how I want it to look, removing the specified property (I'm using Firefox inspector/dev tools to remove it):</p>
  <p><a href="https://i.stack.imgur.com/vc8n8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vc8n8.jpg" alt="enter image description here" /></a></p>
  <p>What is happening?</p>