如何在Bootstrap中重新排序垂直列？ [英] How can I reorder vertical columns in Bootstrap?

问题描述

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

I wan to know if it's possible to re-order vertical columns on 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

What I want it's to move the items on the sidebar from ABCD to BCAD

推荐答案

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

Assuming you have to insert first child just before the last child.

你可以用jquery来做。 参见演示

You can do it with jquery. See Demo

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

这篇关于如何在Bootstrap中重新排序垂直列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！