Bootstrap grid for printing

Question

I would like to design a report page with a different layout for printing to mobile. I am using bootstrap v3. It seems the grid can\'t differentiate between the two as the b

Answer 1

I had a similar problem, for me the easiest solution was to manually modify the width for elements I wanted to appear differently when printed (and I added a specific class -in my case: title-container, details-container for those, along the col-xs-6 etc.).

For example:

    

        

            

            Some stuff
            

            

            Some more stuff
            
        
    


@media print {
    .title-container {
        width: 360px;
        float: left;
    }

    .details-container {
        width: 300px;
        float: right;
    }
}

In my case I needed a column to be floated on the right, one to the left, thus the floats... You could set in your custom css the width also for .col-xs-6 etc. just a quick and dirty solution, but did the job for a page where I needed this...