使用 Bootstrap 3.3 更改打印行顺序

【问题标题】：Change row order on printing using Bootstrap 3.3使用 Bootstrap 3.3 更改打印行顺序
【发布时间】：2019-05-13 04:23:57
【问题描述】：

在使用 Bootstrap 3.3 显示和绘制一些数据的项目中，在屏幕上显示完美，但我还需要使用 boostrap 打印类打印报告

有没有办法在两个块之间切换位置仅在打印时页面？

感谢您的帮助！！！

【问题讨论】：

标签： javascript html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果您在包含两者的元素上使用 flex-box，则可以使用打印媒体查询中的 order 属性来更改它：

document.getElementById('simulate').addEventListener('click', function() {
    document.getElementById('container').classList.toggle('print');
});

#container {
    display: flex;
    flex-direction: column;
}
   
#container > div {
    width: 100%;
    border: solid 1px;
}

@media print {
   #container > div:first-child {
       order: 2;
   }
}

#container.print > div:first-child {
   order: 2;
}

<div id="container">
    <div>Top</div>
    <div>Bottom</div>
</div>

<button id="simulate">Simulate Print</button>

【讨论】：