@media print {

    /* 列印時不要被瀏覽器縮放/背景忽略影響太多 */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 讓 row 在列印時仍能排成 4 欄 */
    #printArea .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 把 col-sm-12 col-md-3 在列印時鎖定為 25% */
    #printArea .col-sm-12.col-md-3,
    #printArea .col-md-3 {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }

    /* 你如果想要兩欄就改成 50% */
    /* #printArea .col-sm-12.col-md-3 { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; } */

    /* 列印時的間距（自己調） */
    #printArea .col-sm-12.col-md-3 {
        padding: 8mm !important; /* 原本 bootstrap padding 會跟列印不一致，這裡直接指定 */
        box-sizing: border-box !important;
    }

        /* 避免標籤被切半 */
        #printArea .col-sm-12.col-md-3,
        #printArea .col-sm-12.col-md-3 > * {
            break-inside: avoid !important;
            page-break-inside: avoid !important;
        }

    /* 如果你不要頁面上的其它東西，列印只顯示 printArea：可選 */
    /*
  body * { visibility: hidden !important; }
  #printArea, #printArea * { visibility: visible !important; }
  #printArea { position: absolute !important; left: 0; top: 0; }
  */
}