为什么当我单击打印按钮时@media打印选择器没有显示正确的格式

当我单击打印按钮时，文本应该在打印对话框中显示为四列，但它在我写的时候显示为段落。

This are my script code where there is click event of print button. 
when i click it print dialog popup but the text which it suppose to 
show in four column shows it as a paragraphs.
 <script>
    $(document).ready(function () {
        $(document.body).on('click', '#btnPrint', function () {
         
         
            window.print();
           
            
           
        });
    });
</script>

my css code.
@media print {
   
 .FourColumnClass
    {
    -webkit-column-count: 4; 
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 40px; 
    -moz-column-gap: 40px;
    column-gap: 40px;
    }
}

my html code.
<div class="clsbtn">
    <button type="button" id="btnPrint">Print</button>
</div>
<div class="FourColumnClass">
  my dog name is jonney. my dog name is jonney. my dog name is jonney.
  my dog name is jonney. my dog name is jonney. my dog name is jonney. 
  my dog name is jonney. my dog name is jonney. my dog name is jonney. my   dog name is jonney.
</div>