When printing website (react component), how to set width for react-bootstrap breakpoints for layout?

Question

We have a react application and would like users to be able to easily and cleanly print the various pages on the website. Our application uses react-bootstrap grid to handle responsiveness. Here is a snippet of one of our pages, which includes two tables. These tables are side-by-side in the top image (based on both the xl and lg breakpoints, which use two columns with size 6), and stacked in the bottom image (based on the md breakpoint, with size = 12).

First Image

Second Image

When I hit CMD + P to launch the print window, I receive the following for this part of the page with the 2 tables:

The print window always shows the two tables stacked, regardless of the current width of my browser. However, for printing, I would prefer for the two tables to be side-by-side, not stacked.

Is it possible to control / change the "width" of the page as perceived by the printer? I assume that currently the print functionality is simply treating the page as some width that falls into the md breakpoint, however it would be great for the page to use the lg or (preferred) xl breakpoints.

Answer 1

Let's say you have something like this as your markup:

<div class="row row-of-tables">
    <div class="col col-12 col-md-12 col-lg-6 col-xl-6">Table 1</div>
    <div class="col col-12 col-md-12 col-lg-6 col-xl-6">Table 2</div>
</div>

When printing, the below code will make the cols take up max-width of 50% just like what col-lg-6 or col-xl-6 does

@media print {
    .row.row-of-tables > .col {
        max-width: 50%;
    }
}