Html CSS/Bootstrap 3中的动态列数

我想要一个网页，一列关于手机（肖像），两列关于手机（风景），三列关于所有更大的东西。我该怎么设置呢？我正在使用Bootstrap3，但我一直无法达到预期的效果

我想我应该为每种情况定义一个断点。伪码

@media phone portrait {
    .mywidth { max-width: 100%; }
}

@media phone landscape {
    .mywidth  { max-width: 50%; }
}

@media anything bigger {
    .mywidth { max-width: 33.33%; }
}

---

然后在文档中添加

。是这样吗？有人能帮我解决语法/断点问题吗？谢谢

通过覆盖hidden xs hidden sm hidden md和col xs col sm col md引导类，它不起作用了？我不知道如何实现我想要的结果。