如何消除移动端视图的列？

@media (max-width: 768px) {
  .column {
    display: none;
  }
}

<div class="row">
  <div class="col-md-4 hidden-xs">Column 1</div>
  <div class="col-md-4">Column 2</div>
  <div class="col-md-4 hidden-xs">Column 3</div>
</div>

<div class="row">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

<script>
  // 检测设备的屏幕宽度
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

  // 根据屏幕宽度隐藏移动端视图的列
  if (screenWidth <= 768) {
    var columns = document.getElementsByClassName('column');
    for (var i = 0; i < columns.length; i++) {
      columns[i].style.display = 'none';
    }
  }
</script>