Question

我想知道是否可以在Bootstrap 3上重新排序垂直列。

.col-xs-8 {
    background: magenta;
}
.col-xs-4 {
    background: cyan;
}
.col-xs-12 {
    background: yellow;
}

<div class="container">
<div class="row">
    <div class="col-xs-8">Content</div>
    <div class="col-xs-4">
        <div class="row">
            <div class="col-xs-12 col-xs-push-12">A</div>
            <div class="col-xs-12">B</div>
            <div class="col-xs-12">C</div>
            <div class="col-xs-12">D</div>
        </div>
    </div>
</div>
</div>

JSFiddle

我希望将侧边栏上的项目从ABCD移动到BCAD

Answer 1

无法为响应式布局实现您想要实现的目标.....但假设您拥有静态内容，则可以使用margin来完成：

这是 demo

将您的订购div包装在某个父div中并对其应用响应式布局....在演示中，我通过abcd类进行了圆顶（虽然因为它的像素而没有响应 EM>）

<强> HTML

<div class="abcd">
   <div class="col-xs-12 " style="margin-top:-110px;color:#000">A</div>
   <div class="col-xs-12" style="margin-top:-150px;color:#000">B</div>
   <div class="col-xs-12" style="margin-top:-130px;color:#000">C</div>
   <div class="col-xs-12" style="margin-top:-90px;color:#000">D</div>
 <div>

编辑：

demo with percentage value

在%ge中，你可以创造类似的东西：

 <div class="abcd">
   <div class="col-xs-12" style="margin-top:-13%;color:#000;">A</div>
   <div class="col-xs-12" style="margin-top:-33%;color:#000">B</div>
   <div class="col-xs-12" style="margin-top:-23%;color:#000">C</div>
   <div class="col-xs-12" style="margin-top:-3%;color:#000">D</div>
 <div>

<强> CSS

.abcd {
    margin-top:33%;/* keep this equal to margin of B, but with opposite sign */
}

Answer 2

假设您必须在最后一个孩子之前插入第一个孩子。

你可以用jquery来做。的 See Demo

$( ".flexbox div:first" ).append().insertBefore( ".flexbox div:last" );

如何在Bootstrap中重新排序垂直列？

2 个答案: