使用Bootstrap 3.3更改打印的行顺序

Question

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

是否可以在仅在打印页面时在2个块之间切换位置？

感谢您的帮助！

Answer 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>