title: Using Bootstrap, CSS Print Media Rules work on Chrome, but not Firefox
body: <p>I have added some <code>@media print</code> queries to a stylesheet to try to make the content more attractive and useful if printed out (typical stuff: remove navbar, interactive features, print links). It is working how I want on Chrome, but not on Firefox and Safari. (I'm taking about pages like <a href="http://harlemshadows.org/the-easter-flower.html" rel="nofollow noreferrer">this</a>). </p>
  
  <p>The rules I've written to not display certain material, but the grid layout  behaves differently:</p>
  
  <h2>Firefox</h2>
  
  <p><a href="https://i.stack.imgur.com/mBYir.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mBYir.png" alt="Print CSS from Firefox"></a></p>
  
  <h2>Chrome</h2>
  
  <p><a href="https://i.stack.imgur.com/LywWt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LywWt.png" alt="Print CSS from Chrome"></a></p>
  
  <p>The additional <code>@print</code> styles are being applied to both, but Chrome reproduces the layout without any of the other media rules being applied (so it appears in one column---which is what I would like); Firefox does not. </p>
  
  <p>I suspect my question is as much about Bootstrap as it is about <code>@print</code> queries <em>per se</em>. But before I start writing <code>@print</code> rules to try to reset Bootstrap's layout, is there something else I should understand about how browsers construct a page for print? Is there a simple solution to ensure other browsers produce something that looks like Chrome?</p>