如果在包含这两个元素的元素上使用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>
