Bootstrap - 将嵌套列推/拉到不同级别的行

Question

我是Bootstrap的新手，并尝试建立一个响应式网站。在尝试对不同屏幕的列进行排序时，我遇到了Bootstrap网格系统的困难。

我已经设置了＆＃34; grid＆＃34;下面工作正常（我希望是有效的）。我的问题是从平板电脑或手机上查看网站时我想要的是＃34; ----2B----＆＃34;在列＃34; ----1C----＆＃34;下推/拉。我试过推/拉柱，但我似乎无法让它工作。

我做错了整个设置还是可能？

<div class="row center-block rounded-div white">
    <div class="col-md-6 col-md-push-6 col-lg-5 col-lg-push-7">
        <div class="row">
            <div class="col-lg-12">
                -----1A-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1C-----
            </div>
        </div>
    </div>

    <div class="col-md-6 col-md-pull-6 col-lg-7 col-lg-pull-5">
        <div class="row">
            <div class="col-lg-12">
                -----2A-----
            </div>
    </div>
        <div class="row">
            <div class="col-lg-12">
                -----2B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2C-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2D-----
            </div>
        </div>

    </div>
</div>

我试图勾勒出我想要完成的所有内容：

Answer 1

列的顺序不允许。您可以使用jQuery交换...类似于$('element1').before($('element2'))

示例：

$(document).ready(function() {
     $('.a2').before($('.b2'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row center-block rounded-div white">
    <div class="col-md-6 col-md-push-6 col-lg-5 col-lg-push-7">
        <div class="row">
            <div class="col-lg-12">
                -----1A-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----1C-----
            </div>
        </div>
    </div>

    <div class="col-md-6 col-md-pull-6 col-lg-7 col-lg-pull-5">
        <div class="row a2">
            <div class="col-lg-12">
                -----2A-----
            </div>
    </div>
        <div class="row b2">
            <div class="col-lg-12">
                -----2B-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2C-----
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                -----2D-----
            </div>
        </div>

    </div>
</div>

Answer 2

使用您的HTML结构。很难做到。所以我的解决方案是使用可见控件类

<div class="row">
    <div class="col-lg-12">
        -----1C-----
    </div>
    <div class="visible-xs-12">
        -----2B----- <!-this only visible on extra small devices with column 12 ->
    </div>
</div>

资源：http://getbootstrap.com/css/#responsive-utilities

Answer 3

我认为这是你用Bootstrap最接近的。它也不适用于移动设备上的反向a4，a3订单。此外，列的位置取决于相邻列的高度。

    def packagename = "com.packagename";
    android {
        defaultConfig {
        applicationId packagename
    }

    buildTypes {
        debug {
            applicationIdSuffix ".dev"
            manifestPlaceholders = [finalApplicationId: packagename + applicationIdSuffix]
        }
        release {
            applicationIdSuffix ""
            manifestPlaceholders = [finalApplicationId: packagename + applicationIdSuffix]
        }

http://codeply.com/go/XCTc3U4bWh

在Bootstrap 4中， 可以改变全宽（12个单位）列的顺序。

另见：Change the order of col-*-12 columns in Bootstrap 3 by using push/pull