如何仅在打印时相对于另一个 div 设置 div position

Question

I am building an HTML report and I want to move some divs to be above another div @ media print only. Or, how can I set the position of a div relevant to another one?

example: div_2's bottom to top of div_1 means

div_2  
div_1

example: div_2's left to right of div_1 means

div_1div_2

Can I do this?

Answer 1

In many browsers support flexbox

<div class="d0">
   <div class="d1"></div>
   <div class="d2"></div>
</div>

EX1:

.d0 {
  display: flex;
  flex-direction: column-reverse;

}

EX2:

.d0 {
  display: flex;
}

Answer 2

Actually I found a very tricky solution which will enable you to change divs at print and also add page breaks if you want. the solution is using Js

    jQuery(document).bind("keyup keydown", function(e){
    if(e.ctrlKey && e.keyCode == 80){
        fd = document.getElementById( '1_div' );
        sd = document.getElementById( '2_div' );
        sd.parentNode.insertBefore( sd, fd );
    }
});