How can I override the flex-xs breakpoint when printing? - html

Question

I have a row of checkboxes, that when the screen size is small enough (less than 600px), collapse into columns.
This is fine, but now when I attempt to print this document, the mobile breakpoints activate, and stack up in columns, rather than in rows that I want them in.
Here is the min example of the html I have.
<div id="printCheckbox" flex="100" layout="row" layout-xs="column" layout-wrap>
<div flex="33" flex-xs="100" >
<md-checkbox>1</md-checkbox>
</div>
<div flex="33" flex-xs="100" >
<md-checkbox>2</md-checkbox>
</div>
<div flex="33" flex-xs="100" >
<md-checkbox>3</md-checkbox>
</div>
<div flex="33" flex-xs="100" >
<md-checkbox>4</md-checkbox>
</div>
<div flex="33" flex-xs="100" >
<md-checkbox>5</md-checkbox>
</div>
<div flex="33" flex-xs="100" >
<md-checkbox>6</md-checkbox>
</div>
</div>
I can obviously remove the mobile support to have the print view function correctly, however I am wondering if I can override the flex-xs values in css.
Here is what I am attempting to do in css
#media only print {
#printCheckbox{
[flex-xs="100"] {
// Make them 33?
}
}
}
So is it possible to supply a different value to the flex-xs in css? Or disable the mobile breakpoints completely?

Answer 1

I didn't really do what I wanted to, but I found a workaround myself.
I made my CSS this for the parent container of the checkboxes
#media screen and (max-width: 600px) {
.printCheckBoxContainer{
flex-direction: column;
}
.printCheckBox{
flex-direction: column;
flex-basis: 100%;
}
}
#media only print {
.printCheckBoxContainer{
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.printCheckBox{
align-self: center;
flex-basis: 33%;
}
And then changed my HTML to look like
<div class="printCheckBoxContainer" class="verify-identity" flex="100" layout="row" layout-wrap>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
<div class="printCheckBox" flex="33">
<md-checkbox></md-checkbox>
</div>
</div>
So I kept the default breakpoints, then just specified the flex-basis in css based on the media queries. Basic stuff, but it works!
Unless I get a better answer within a couple of days, I will accept my own answer.