Css 引导布局混乱

我知道Bootstrap是首先设计手机的。我想知道仅仅使用Bootstrap的CSS类是否就可以实现可能的布局

尺寸

col md

或更大的图A

当屏幕为

列sm

或

列xs

时，转到B或C（两种不同的解决方案）

我正在为A->B和A->C寻找正确的

div

布局

每个部分的高度都是随机的，因为其中生成的内容是动态的。我在div中添加了高度，只是为了填充，但它们是动态的，无法设置

以下内容不起作用

小提琴

我想你可能要找的是你可以

的地方。推md-

和

。拉md-

我想你可能要找的是你可以

的地方。推md-

和

。拉md-

在文档中有一些元素流，你不能随意混合它们，除非你绝对定位它们

仅使用引导类，我认为唯一的方法是复制内容-页面中有所有A、B和C，并根据屏幕大小显示所需内容-使用类

可见xs

，

隐藏sm

等。

---

但复制内容通常不是明智的想法。

在文档中有一些元素流，除非绝对定位，否则不能随意混合

仅使用引导类，我认为唯一的方法是复制内容-页面中有所有A、B和C，并根据屏幕大小显示所需内容-使用类

可见xs

，

隐藏sm

等。

---

但是复制内容通常不是明智的想法。

解决方案：有两种方法基于列的静态高度还是动态高度。如果它们有静态高度，那么我们有一个纯css解决方案，使用float和clear属性以及margintop属性来实现这一点

列高度固定的纯css示例：

如果高度不是固定的和动态的，那么我们需要使用jquery来调整

margin top

属性，以便根据A->B和A->C场景动态消除对齐错误的2个元素之间的间隙。对于这个简单的解决方案，我们将使用默认的jquery和Modernizer js

具有动态列高度的jQuery和css解决方案示例：

---

希望这能有所帮助。

解决方案：根据柱的静态高度或动态高度，有两种方法。如果它们有静态高度，那么我们有一个纯css解决方案，使用float和clear属性以及margintop属性来实现这一点

列高度固定的纯css示例：

如果高度不是固定的和动态的，那么我们需要使用jquery来调整

margin top

属性，以便根据A->B和A->C场景动态消除对齐错误的2个元素之间的间隙。对于这个简单的解决方案，我们将使用默认的jquery和Modernizer js

具有动态列高度的jQuery和css解决方案示例：

---

希望这有帮助。

请共享您迄今为止构建的代码。@NasirT代码已添加。请共享您迄今构建的代码。@NasirT代码已添加。关闭，但高度是动态的，而不是静态的。提供的CSS是固定的。使用jQuery为您计算高度可以吗？取决于涉及的程度。我真的更喜欢一个严格的css答案。我已经用纯css和jquery解决方案更新了我的答案。如果高度是固定的，那么纯css是可能的，如图所示，但在动态高度上，我们将不得不使用jquery，因为我们不知道列的长度和行为。希望这些样本有帮助。接近，但高度是动态的，而不是静态的。提供的CSS是固定的。使用jQuery为您计算高度可以吗？取决于涉及的程度。我真的更喜欢一个严格的css答案。我已经用纯css和jquery解决方案更新了我的答案。如果高度是固定的，那么纯css是可能的，如图所示，但在动态高度上，我们将不得不使用jquery，因为我们不知道列的长度和行为。希望这些样品能有所帮助。

<div class="row">
    <div style="background:blue" class="col-xs-12 col-md-4">
        <div style="height:100px"></div>
    </div>
    <div style="background:yellow" class="col-md-8 col-xs-12">
        <div class="row">
            <div style="background:green" class="col-md-12 col-xs-12">
                <div style="height:20px"></div>
            </div>
            <div style="background:pink" class="col-md-12 col-xs-12">
                <div style="height:100px"></div>
            </div>
            <div style="background:red" class="col-md-12 col-xs-12">
                <div style="height:100px"></div>
            </div>
        </div>
    </div>
    <div style="background:orange" class="col-md-4 col-md-pull-4 col-xs-12">
        <div style="height:50px"></div>
    </div>
</div>