CSS3 Columns are not displaying on IPad and IPhone

Question

I'm using CSS3 Columns like

.Content {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
.List {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 0px;
    -moz-column-gap: 0px;
    column-gap: 0px;
    display: block !important;
}

and my html looks like this.

<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 List">
  <div class="Content col-lg-12 col-md-12 col-sm-12 col-xs-12">
     My content
  </div>
</div>

I checked my iPad and iPhone diplay by Chrome development tool, and it works fine. However, real iPad and iPhone not showing anythings. How can I solve this?

Answer 1

After taking a long trip, I found a solution about this problem. What I want to achieve was made my cards look like pinterest. And I used Lightweight Responsive Pinterest Layout with jQuery - Waterfall.