Issues printing with twitter bootstrap

I've got a site I am developing in the newest version of twitter bootstrap. v3.3.4

What I need is for the print version to use the col-sm-* settings to print from, instead of the col-xs-*.  So basically I have a two column grid design so one col is col-sm-6 and the other is col-sm-6, the mobile version is col-xs-12, which is what prints.  How can I configure this to use the col-sm grid setup when printing?
Baub EisAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
If I undertand, the problem it's not related to sm/xs but to 6 or 12.
You can try these steps:

1. omit the media type (if one) in the style sheet link: <link rel="stylesheet" href="css/your-style.css" />;
2. enclose all rules actually present in your stylesheet (in Bootstrap tupically app.css) wtihin the media query
@media screen {
  /*all your rules and responive media queries here*/
}

Open in new window

   
3. add e new media query for the print
@media print {
  /*printing rules here*/
}

Open in new window


In the printing rules you can set cols' with to fit your needs: if you need your tow col-sm-6 began one col-**-12 then you
 can try something like:
@media print {
  col-sm-6 {
    width: 100%;
  }
}

Open in new window


This way, when you'll be printing your col-**-6 will become col-**-12.
Hope this is what you're looking for :)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Responsive Web

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.