Изменить порядок строк при печати с помощью Bootstrap 3.3 - PullRequest
Новая
       17

Изменить порядок строк при печати с помощью Bootstrap 3.3

0 голосов
/ 13 мая 2019

В проекте, использующем Bootstrap 3.3 для отображения и отображения некоторых данных, на экране они отображаются идеально, но мне также нужно распечатать отчет, используя классы печати boostrap

Есть ли способ переключения позиций между двумя блоками ТОЛЬКО ПРИ ПЕЧАТИ страницы?

switch places

Спасибо за помощь !!!

1 Ответ

0 голосов
/ 13 мая 2019

Если вы используете 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>
...