Bootstrap 交换 div 响应

Question

我使用 Bootstrap 框架来创建我的布局。
我想要实现的是这样的（抱歉我不能在这里插入图片）： Layout

到目前为止，我只设法正确创建了浏览器或移动设备。我无法正确地将布局从浏览器更改为移动设备。

目前，我正在使用此代码：

<div id="main-content" class="container">
    <div class="row no-padding">
        <div class="col-xs-12 col-sm-8 red">Red container</div>     
        <div class="col-xs-12 col-sm-4 blue">Blue container</div>
        <div class="col-xs-12 col-sm-8 green">Green container</div>     
        <div class="col-xs-12 col-sm-4 orange">Orange container</div>
    </div>
</div>

此代码的问题是橙色容器的位置与绿色容器平行（导致蓝色和橙色之间有相当大的间隙），而我希望橙色容器直接位于蓝色容器下方。

我找到了一个解决方案，即复制容器并使用 visible-* 根据媒体大小显示或隐藏，但我认为这不是一个非常干净的解决方案。如果可能的话，我想使用 CSS-only 解决方案，而不是使用 js。

对于这个问题，我将不胜感激。
非常感谢！

编辑：
我在 link 中重新创建了布局：http://www.bootply.com/C97SCp3Wcn

Answer 1

试试这个答案...希望它对你有用

此为桌面版

<div id="main-content" class="container visible-desktop">
    <div class="row no-padding">
        <div class="col-xs-12 col-sm-8 red">Red container</div>     
        <div class="col-xs-12 col-sm-4 blue">Blue container</div>
        <div class="col-xs-12 col-sm-8 green">Green container</div>     
        <div class="col-xs-12 col-sm-4 orange">Orange container</div>
    </div>
</div>

以及移动版

<div id="main-content" class="container visible-phone">
    <div class="row no-padding">
        <div class="col-xs-12 col-sm-8 red">Red container</div>     
        <div class="col-xs-12 col-sm-4 blue">Blue container</div>
        <div class="col-xs-12 col-sm-4 orange">Orange container</div>
        <div class="col-xs-12 col-sm-8 green">Green container</div>     

    </div>
</div>

Answer 2

您必须编写自己的自定义 css 来实现 this.Put 在 boostrap 媒体查询中您自己的代码来实现您的布局。示例：-

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        //your css code
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
        //your css code

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        //your css code


    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        //your css code

    }

Answer 3

看这里

<div class="row">

     <div class="col-lg-8 col-xs-12">

         <div class="row">

             <div class="col-sm-12 col-lg-12">
                 red
             </div>

             <div class="col-sm-12 col-lg-12">
                 blue
             </div>
         </div>

     </div>


     <div class="col-lg-4 col-xs-12">

         <div class="row">

             <div class="col-sm-12 col-lg-12">
                 green
             </div>

             <div class="col-sm-12 col-lg-12">
                 orange
             </div>
         </div>

     </div>

</div>

这有效。

解释：

您必须为桌面屏幕创建两个列 lg-8 和 lg4，为移动屏幕创建 xs-12。在此列中，您可以创建彩色行。这种嵌套结构（连续两行）是必需的，因为外部列的高度不同。

更新:

我有两种选择供您选择。没有 Javascript 和 bootstrap 只有，但最小冗余。看这里：http://www.bootply.com/b4PCoVthvm

或者您可以将 javascript（砌体）与 bootstrap 结合使用。看这里http://masonry.desandro.com/

Bootstrap 交换 div 响应

Bootstrap swap div responsive

html

css

twitter-bootstrap

twitter-bootstrap-3