Bootstrap 3 - Print layout and breaks after each grid column

If you take this example (view it here: http://www.bootply.com/93816)

<div class="container">
  <div class="row">
    <div class="col-md-6">Column1</div>
    <div class="col-md-6">Column2</div>
  </div>
</div>

When you do a print preview of the generated page, it seems to cause the columns to stack/break (as if the float is removed) instead of displaying them in the usual grid layout.

I've had a look at the @media print sections of bootstrap.css and I can't see anything related to div that would cause that to happen.

Does anyone know how to avoid this?

Bojangles comment got me in the right direction, so I'll answer my own question.

Using the 'xs' size grid columns, which according to http://getbootstrap.com/css/#grid-options is for "Extra small devices Phones (<768px)", Bootstrap happily prints as expected.

<div class="container">
  <div class="row">
    <div class="col-xs-6">Column1</div>
    <div class="col-xs-6">Column2</div>
  </div>
</div>

The solution has to be on the elements not the page itself. You also shouldn't rely on col-xs-... because these are for small screen/devices.

The issue is that the page itself is small in terms of pixels, so bootstrap thinks it needs to apply the xs styles.

The issue won't be addressed by the Bootstrap team and is related to https://code.google.com/p/chromium/issues/detail?id=273306

The Bootstrap solution was to obscurely document this 'quirky' behavior https://github.com/twbs/bootstrap/issues/12078.

In my opinion, there should be a col-print-... set of layout classes so extra small and print can co-exist.

My interim solution is as follows:

@media print {
  [class*="col-sm-"] {
    float: left;
  }
}

You could use col-print, in our case we're using sm, not xs because we want xs to block the layout, which is why utilizing those classes for print won't work.

Based on Gerard solution, you can use the bootstrap mixin .make-grid() like this, so the print is doesn't ever fall to the xs size

@media print {
  .make-grid(sm);
}

or the generated css (if you don't like using less):

@media print {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
}

I created a separate print.css and added the following:

@page {
    size: A3;
    margin-left: -5cm;
    margin-right: -5cm;
    }

Works fine with Chrome, but the negative margins kills IE. Firefox doesn't seem to need it. I would be interested in another approach.