title: Dompdf prints html bootstrap code as col-sm-x and not as col-lg-x
body: <p>I am using Dompdf in PHP in order to print reports in PDF format. I can't figure out how to print an HTML bootstrap code the way I see it on my screen. For example, you know that bootstrap grid collapses if the device is smaller. In this case, in my PDF, the grid appears as though it were inside a mobile or table, like <code>col-xs-x</code> or <code>col-sm-x</code> instead of <code>col-lg-x</code>. Is there a way to specify in Dompdf that the view should look like in <code>col-lg-x</code>?</p>
  
  <p>This is the sample html bootstrap code:</p>
  
  <pre><code>$content2='&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="jumbotron"&gt;
      &lt;h1&gt;My First Bootstrap Page&lt;/h1&gt;
      &lt;p&gt;Resize this responsive page to see the effect!&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-4 col-md-4 col-lg-4"&gt;
        &lt;h3&gt;Column 1&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit...&lt;/p&gt;
        &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4 col-md-4 col-lg-4"&gt;
        &lt;h3&gt;Column 2&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit...&lt;/p&gt;
        &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4 col-md-4 col-lg-4"&gt;
        &lt;h3&gt;Column 3&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit...&lt;/p&gt;
        &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;';
  </code></pre>
  
  <p>Here is the rest of the code:</p>
  
  <pre><code>$pdf = new Dompdf();
  $pdf-&gt;loadHtml($content2);
  $pdf-&gt;render();
  $pdf-&gt;stream();
  </code></pre>
  
  <p>For example, in my screen, columns
   <code>&lt;h3&gt;Column 1&lt;/h3&gt;</code>, <code>&lt;h3&gt;Column 2&lt;/h3&gt;</code>, and <code>&lt;h3&gt;Column 3&lt;/h3&gt;</code> appear in the same line. 
  But inside the pdf, they appear each in different lines (collapsed to <code>col-xs-x</code>). There is one in a row. And not three in one row -> as the way I want it (<a href="http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default&amp;stacked=h" rel="nofollow">example here</a>).</p>