html - 在 Bootstrap 中为响应式设计重新排序 div

Question

我正在使用 Bootstrap 。我有一排三 block :

<div class="row">
    <div class="span3" id="B">...</div>
    <div class="span4" id="A">...</div>
    <div class="span3" id="C">...</div>
</div>

这样三个 block 的顺序为B、A、C。

如果屏幕宽度较小，则三个 block 各占一行，也依次为B、A、C.

但我希望它们按

A
B
C

我该怎么做？

Answer 1

试试这个:

<div class="row">
    <div class="pull-left">
        <div class="span4 pull-right" style="margin-left:0px;">A</div>
        <div class="span3 pull-left" style="margin-left:0px;">B</div>
    </div>
    <div class="pull-right">
        <div class="span3">C</div>
    </div>
</div>

您可能需要稍微调整间距，但它应该会在屏幕宽度较窄时为您提供所需的正确顺序。