Collapse columns in mobile view but not in print view - css

Question

I want to collapse columns so that they become stacked when they're viewed in mobile view, but I want to ignore that entirely when in print view.
So if I have this:
<div class="row">
<div class="col-md-6">
These columns should be stacked in mobile view...
</div>
<div class="col-md-6">
...but not in print view.
</div>
</div>
I'd like them to collapse only when I have a small screen but it's not print view. So the behavior for print view is as if col-md-6 was replaced with col-xs-6.
Using col-xs-6 and the like stops it from collapsing in print view, but of course then it doesn't collapse in screen view.
I want to avoid using one of the print visibility classes because then I'll have to duplicate the content, and I would only be changing the classes of the divs.
I tried getting a version of Bootstrap without “responsive utilities” checked, and then enabling the non-responsive version with <link href="..." rel="stylesheet" media="print" /> and the responsive version for media="screen", but it still collapsed in both.
How can I collapse the columns only in small non-print views?

Answer 1

Sorry, my comment was too brief. You need to set a media query with the print styles you want to use. Assuming you want the md classes to print in columns, add this to your custom css file:
#media print {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666666666666%;
}
.col-md-10 {
width: 83.33333333333334%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666666666666%;
}
.col-md-7 {
width: 58.333333333333336%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666666666667%;
}
.col-md-4 {
width: 33.33333333333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.666666666666664%;
}
.col-md-1 {
width: 8.333333333333332%;
}
}