title: Overriding mediaquery css rules in Bootstrap
body: <p>Here is the sample code that I have which shows <code>#data</code> in  <code>md-12</code> or <code>sm-6</code> based on the browser's width. in Some conditions (like the special mode of preview that I want to implement and will be triggered by JS) I want to override the <code>#data</code> rendering rules to renders only the <code>col-md-12</code> even on small screens.</p>
  <p>Please note that I don't want to remove any classes from DOM, and looking for a solution to use <code>.parent</code> (I can add any class to this element) to override its child rendering rules.</p>
  <p>In other words, I want to force bootstrap to shows content in <code>md</code> mode and ignores the browsers' width.</p>
  <p>I also wondered to know if this problem can be solved by changing the <code>viewport</code> value?</p>
  <pre><code>&lt;div class=&quot;parent&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div id=&quot;data&quot; class=&quot;col-md-12 col-sm-6&quot;&gt;data&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>