Html 引导网格-移动和桌面布局

我有以下问题： 我想要三列并排在桌面上，全屏显示。 在移动设备上，我希望全屏显示下有三行

以下是桌面草图：

以下是手机示意图：

这是我现在拥有的代码。它可以在桌面上工作，但不能在移动设备上工作

#eshop{
背景色：红色；
}
#特鲁拉纳{
背景颜色：蓝色；
}
#巴纳克{
背景颜色：黄色；
}
.col-md-4{
溢出：自动；
垫底：100%；
利润底部：-100%；
}
.col-xs-12{
}

烘烤木材
A.
B
C

尽管概念是使用vh尺寸单位。我已在

CSS:

---

正如上面所说的“在移动设备上，我希望在全屏显示下有三行。”之前我假设他希望每个部分都是全屏显示的，但在再次阅读后，我做了修改，但要归功于zimsystem享受：）

对移动设备使用媒体查询和

vh

.col-md-4{
     overflow: auto;
     height:100vh;
}    

@media (max-width:768px) {
        .col-md-4{
            height:33.33vh;
        }
    }

---

演示：

结合您的答案解决了问题。）

@介质（最大宽度：768px）{
.col-md-4{
溢出：自动；
高度：33.33vh；
}
}
@介质（最小宽度：769px）{
.col-md-4{
溢出：自动；
高度：100vh；
}
}

我认为这不是一个好方法，因为这将被引导功能覆盖。因此，无论.col-md-4在哪里使用，这都会影响整个应用程序。但问题的答案是如何解决的？@kernallora对于一个人来说，这只是一个想法，他可以通过这些方式来解决他的问题。。他可以创建只针对一个节的自定义类。感谢you@Jyoti答案使用了填充，所以这不在他们的答案中。它在我的演示中。

.col-md-4{
     overflow: auto;
     height:100vh;
}    

@media (max-width:768px) {
        .col-md-4{
            height:33.33vh;
        }
    }