Bootstrap 3使用媒体查询在一行中添加正确的列类？我在用SASS

我在这方面已经做了好几个小时，尝试了无数次谷歌搜索，但还没有找到一个可靠的解决方案。我正在使用Bootstrap3和SASS开发一个网站响应性布局（宽度940px）。我一直在遵循Bootstrap3在线文档，这是非常有用的。桌面上的一切都很好，但我很好奇，想知道是否有可能使用媒体查询操作移动布局。目前，我在容器中有两行，每行中有四列（请参见图片）

当我在“纵向”视图中查看iPhone5上的这个布局时，我看到所有的列都垂直堆叠，这很好。（请看图片）

问题

当我在iPhone5上的“横向”视图中查看此布局时，所有两行的列都保留为“纵向视图”，但在屏幕上伸展，正如我希望看到的那样，“纵向视图”将两列显示在一起，而不是仅在屏幕上伸展的一列上。（请看图片）

我尝试过许多方法，并遵循Bootstrap3在线文档，但在iPhone5（横向视图）上无法显示两列。是的，表视图工作正常……没有问题

如果有人能给我指出正确的方向，我将不胜感激

我一直在关注Bootstrap 3在线资源：

我只在代码中包含一行。我有一个“splashwrapper”，它扩展了三个类，然后是“splashwrapper”中的“splashbox”

以下是我的CSS代码：

    .splash-wrapper {   

        // XS
        @extend .col-xs-6;

        // SM
        @extend .col-sm-4;

        // MD
        @extend .col-md-3;

    }       

    .splash-box {

        //DROP SHADOW
        @extend .drop-shadow;

        //BORDER RADIUS
        @extend .border-radius;


        background-color:#ffffff;
        padding:.5em;
    }

HTML代码：

<!--    CONTAINER       -->
    <div class="container">
        <!--    ROW     -->
        <div class="row"
            <!--    SPLASH-WRAPPER  --> 
            <div class="splash-wrap">
                <!--    SPLASH BOX      -->
                <div class="splash-box">
                    <p>It is a long established fact that a reader will be distracted by the 
                    readable content of a page when looking at its layout.It is a long established 
                    fact that a reader will be distracted by the readable content of a page 
                    when looking at its layout.</p>
                </div><!--  //SPLASH BOX    -->
            </div><!--  //SPLASH-WRAP   -->         

            <div class="splash-wrap">
                <div class="splash-box">
                    <p>It is a long established fact that a reader will be distracted by the 
                    readable content of a page when looking at its layout.It is a long established 
                    fact that a reader will be distracted by the readable content of a page 
                    when looking at its layout.</p>
                </div>
            </div><!--  //SPLASH-WRAP   -->         


            <div class="splash-wrap">
                <div class="splash-box">
                    <p>It is a long established fact that a reader will be distracted by the 
                    readable content of a page when looking at its layout.It is a long established 
                    fact that a reader will be distracted by the readable content of a page 
                    when looking at its layout.</p>
                </div>
            </div><!--  //SPLASH-WRAP   -->         


            <div class="splash-wrap">
                <div class="splash-box">
                    <p>It is a long established fact that a reader will be distracted by the 
                    readable content of a page when looking at its layout.It is a long established 
                    fact that a reader will be distracted by the readable content of a page 
                    when looking at its layout.</p>
                </div>
            </div><!--  //SPLASH-WRAP   -->         

        <!--    //ROW       -->     
    <!--        //CONTAINER     -->             

如果你不仅想以最好的方式解决问题，而且想预防未来的问题，我会考虑投资时间学习一些东西，比如Susy Compass图书馆。一开始它很混乱，但它是围绕着做出响应性布局的概念设计的，所以一旦你通过了学习曲线，它就相当令人兴奋

我使用这个库在1-2天内创建单页响应站点。请查看：


很棒的教程：
-更不用说，您必须转换为SASS，然后将我在媒体查询中使用的ems更改为像素。阅读@mdo评论，因为响应实用程序不支持纵向和横向之间的中间点，需要调整某些表单css。Cab，非常感谢，我偶然发现了该讨论，在阅读了“mdo”回复之后，我的结论是，“mdo”只是不接受存在需要解决的差距/问题。我正在考虑试用andyl的解决方案/黑客，看看这是否能让事情变得更好。你试过安蒂尔的要点吗？我使用它一点问题都没有。我喜欢它。他接受了它，但是Bootstrap的版本控制要求它在版本4中实现，而不是3非常感谢你，Steve。我渴望所有的好知识。我很欣赏这些链接。你能用Susy解决像我这样的问题吗？wot是Susy对体验开发者的学习曲线，从1到10分？嘿，Steve，我对Susy做了一些研究，当我看到Eric Meyer的名字时，我失去了动力。别误会，埃里克早期的一些作品非常好。但近几年来，他的工作一直没有成功。另一个我回避的前福音传道者是格雷格·瑞斯“自负的蠢驴”。