引导拉动和推动以修复布局顺序

Question

现在我有以下内容：

编辑我认为没有必要包含E，但显然是。

  <div class='row'>
    <div class="col-md-8">
      A
    </div>

    <div class="col-md-4">
      B
      D
    </div>
  </div>

  <div class='row'>
    <div class="col-md-8">
      C
      E
    </div>
  </div>

在桌面上（左侧）实现以下布局：

我试图在移动设备上实现这种外观（右侧）。

我怎样才能做到这一点？

Answer 1

你可以做到

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

无需推拉。 Working fiddle

有关更新的问题：

<div class="container">    
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-12">A</div>
                <div class="col-md-12">C</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-12">B</div>
                <div class="col-md-12">D</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            E
        </div>
    </div>
</div>

Answer 2

你可以这样做：

FIDDLE

＆＃13;

＆＃13;

<div class='row'>
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
        <div class="row">
            <div class="col-lg-12">
                A
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                C
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="row">
            <div class="col-lg-12">
                B
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                D
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;