Css 使特定列拉伸页面高度

我想在下面的布局中做两个特定的列，拉伸整个页面高度，除非他们在移动（平板电脑）上，他们仍然可以拉伸，因为大多数平板电脑都是720

   <div class="rows">
     <div class="col-md-1">
     </div>
     <div class="col-md-10">
     </div>
     <div class="col-md-1">
     </div>
    </div>

col-md-1

，现在只延伸到您放入其中的内容延伸的程度，不管我多么希望，在高于720的任何位置上，它都可以将页面拉伸到整个高度，也就是说，它们应该向下延伸到页脚，然后在小于720的任何位置上，它们应该只是规则高度的框，也就是说“拉伸以适合其内容”

如何在不破坏默认引导行为的情况下实现这一点。

1）在HTML中向要增加到页面高度的div添加一个新类

2） 在CSS中，使用最小宽度为720px的@media screen，以便仅为非移动设备指定此值，并在新类中指定最小高度为100%。请参见下文

@media screen and (min-width: 720px){
.new-class {
    min-height:100%; }}