How to set div position relative to another div only at printing

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?

Does this answer your question? [@Media print css](https://stackoverflow.com/questions/32699436/media-print-css) — Harun Yilmaz, Jul 14 '20 at 07:07
Unfortunately, no He is trying to show specific div, not position a div relative to another — El-Sayed Hamed, Jul 14 '20 at 07:15

score 0 · Answer 1 · answered Jul 14 '20 at 07:15

0

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;
}

answered Jul 14 '20 at 07:15

rian

370
1
6

But it doesn't allow pagebreak inside this div, do you know anything about this ? – El-Sayed Hamed Jul 14 '20 at 13:29
try this `.box { display: flex; flex-wrap: wrap; }` – rian Jul 14 '20 at 13:44
and read the document carefully https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox – rian Jul 14 '20 at 13:45

score 0 · Accepted Answer · answered Jul 22 '20 at 08:16

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 );
    }
});

How to set div position relative to another div only at printing

2 Answers2