Html 强制引导列位于2列布局中其他列的下方

这是我的代码：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A   
        </div>
        <div class="col-md-6">
            B     
        </div>
        <div class="col-md-6">
            C     
        </div>
    </div>
</div>

A.
B
C

充满了实际内容，看起来有点像这样：

在不改变HTML结构的情况下，有没有办法强制B显示在左边的a下？C应该仍然保持在右边。

---

我尝试使用pull-6，但这会导致它显示在A上。

您每行包装超过12列。请按如下方式每行包装12或更少的可乐：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A   
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            B     
        </div>
        <div class="col-md-6">
            C     
        </div>
    </div>
</div>

A.
B
C

---

上面的代码结构是在引导中添加列的正确方法，它还可以根据需要将B移到A下方的左侧。

您每行包装超过12列。请按如下方式每行包装12或更少的可乐：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A   
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            B     
        </div>
        <div class="col-md-6">
            C     
        </div>
    </div>
</div>

A.
B
C

---

上面的代码结构是在引导程序中添加列的正确方法，它还可以根据需要将B移到A下方的左侧。

将

清除：左侧

添加到第二个div的CSS。但是，这不会改变C也在A下方的事实

HTML

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A   
        </div>
        <div class="col-md-6 second-col">
            B     
        </div>
        <div class="col-md-6">
            C     
        </div>
    </div>
</div>

---

将

clear:left

添加到第二个div的CSS中。但是，这不会改变C也低于A的事实

HTML

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A   
        </div>
        <div class="col-md-6 second-col">
            B     
        </div>
        <div class="col-md-6">
            C     
        </div>
    </div>
</div>

---

如果无法更改标记，可以使用

flexbox

使用可支持稍旧的浏览器。全屏输出

.col-md-6:n第n个子项（1）{
背景色：#f00；
}
.col-md-6：第n个孩子（2）{
背景色：#ff0；
}
.col-md-6：第n个孩子（3）{
背景色：#f0f；
}
@介质（最小宽度：992px）{
.行{
显示器：flex；
柔性流：行换行；
}
.col-md-6：第n个孩子（2）{
顺序：3；
}
.col-md-6：第n个孩子（3）{
顺序：2；
}
}

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

B

B

B

B

B

B

B

B

B

B

B

B

C

C

C

C

C

C

C

C

C

C

C

C

C

如果无法更改标记，则可以使用

flexbox

使用可支持稍旧的浏览器。全屏输出

.col-md-6:n第n个子项（1）{
背景色：#f00；
}
.col-md-6：第n个孩子（2）{
背景色：#ff0；
}
.col-md-6：第n个孩子（3）{
背景色：#f0f；
}
@介质（最小宽度：992px）{
.行{
显示器：flex；
柔性流：行换行；
}
.col-md-6：第n个孩子（2）{
顺序：3；
}
.col-md-6：第n个孩子（3）{
顺序：2；
}
}

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

B

B

B

B

B

B

B

B

B

B

B

B

C

C

C

C

C

C

C

C

C

C

C

C

C

为什么不能更改HTML结构？我使用的是一个内容管理系统，这使它变得非常复杂。复杂并不意味着你不应该这么做。我强烈建议您使用正确的方法，而不是尝试破解UI。为什么您不能更改HTML结构？我使用的是一个内容管理系统，这使得它非常复杂。复杂并不意味着您不应该这么做。我强烈建议用正确的方法来做这件事，而不是试图破解UI。C需要站在正确的一边，问题并没有说清楚。我不知道有什么方法可以做到这一点，而不最终改变结构，或者破坏引导程序，使其在一开始使用时“效率低下”。看起来真正的问题在于您正在使用的内容管理系统，它阻止您更改HTML结构。我不知道有什么方法可以做到这一点，而不最终改变结构，或者破坏引导程序，使其在一开始使用时“效率低下”。看起来真正的问题在于您正在使用的内容管理系统，它阻止您更改HTML结构。问题指出“在不更改HTML结构的情况下”。@1interference HTML结构被破坏。解决这个问题也会解决他的问题。如果它没有被破坏，我就不会在一开始就提到它：）@1interference检查这个：你会知道我的意思，问题是“不改变HTML结构”。@1interference HTML结构被破坏了。解决这个问题也会解决他的问题。如果它没有坏，我一开始就不会提到它：）@1interference检查一下：你会明白我的意思的