CSS / Bootstrap 3中的动态列数

Question

我想要一个网页，手机上有一列（纵向），手机上有两列（横向），而且有更大的三列。我该如何设置？我正在使用Bootstrap 3，但我无法达到预期的效果。

我在想我应该为每个案例定义一个断点。伪代码

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

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

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

然后在文档中有<div class="mywidth">。是对的吗？任何人都可以帮助我解决语法/断点问题吗？感谢