列的移动视图宽度不扩展到100％？

Question

我有一排“盒子”，每个盒子之间有一条线作为边框，当浏览器宽度发生变化时，很难让它们扩展到宽度的100％。

HTML：

<div class="row" id="vlr">
   <div class="col-1">&nbsp;</div>
   <div style="border-left:1px solid #909090;height:250px" class="border"></div> <!--this is just a border-->
   <div class="col-25" id="txtbox1">
      <div>Some text</div>
   </div>
   <div style="border-left:1px solid #909090;height:250px" class="border"></div>
   <div class="col-25" id="txtbox2">
      <div>Some text</div>
   </div>
   <div style="border-left:1px solid #909090;height:250px"></div>
   <div class="col-5" id="txtbox3">
      <div class="content">Some text</div>
   </div>
   <div style="border-left:1px solid #909090;height:250px" class="border"></div>
   <div class="col-1">&nbsp;</div>

我有12列。我将col-25定义为宽度为20.83％。

CSS：

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

}

@media only screen and (max-width: 768px) {

#txtbox1{
    display:block;
}

#txtbox2{
    display:block;
}

#txtbox3{
    display:block;
}

.border {
    display:none;
}

}

我在使用和不使用display：block时尝试了CSS;既不工作。但是，当缩小浏览器大小时，display / none for borders /确实有效。