Bootstrap列排序

Question

我有一点精神障碍 - 我确信这是一个简单的解决方案，但我还没有得到它......

我试图实现以下布局。顶部图像是移动布局，下部是桌面布局。

注意：这些用于表示移动和桌面视图端口上的单个区域，而不是单个页面上的两个部分。

我试图在This Fiddle中构建我需要的东西，但它不对，我无法在不重复div＃3的情况下弄清楚如何做到这一点。< / p>

<div class="wrap">
  <div class="pad col-sm-8">
    <div class="row">
      <div class="pad a col-xs-12"></div>
      <div class="pad c col-xs-12"></div>
    </div>
  </div>
  <div class="pad b col-sm-4"></div>
  <div class="clearfix"></div>
</div>

<div class="wrap">
  <div class="pad col-xs-8">
    <div class="row">
      <div class="pad a col-xs-12"></div>
    </div>
  </div>
  <div class="pad b col-xs-4"></div>
  <div class="pad c col-xs-12"></div>
  <div class="clearfix"></div>
</div>

是否有可能在不必复制div＃3的情况下实现布局？我可以很容易地通过使用重复的div获得我想要的东西，但这显然是不可取的。

Answer 1

div b上的右拉怎么样？

<div class="wrap">
  <div class="pad b col-xs-4 col-md-4 pull-right"></div>
  <div class="pad a col-xs-8 col-md-8"></div>
  <div class="pad c col-xs-12 col-md-8"></div>
  <div class="clearfix"></div>
</div>

更新小提琴： https://jsfiddle.net/kfyLLvt5/2/

Answer 2

试试这个：就像你的形象一样：

<div class="wrap">
  <div class="pad col-md-12">
    <div class="row">
      <div class="pad a col-xs-8"></div>
      <div class="pad c col-xs-4"></div>
    </div>
  </div>
  <div class="pad b col-md-4"></div>
  <div class="clearfix"></div>
</div>

<div class="wrap">
  <div class="pad col-xs-8">
    <div class="row">
      <div class="pad a col-xs-12"></div>
    </div>
  </div>
  <div class="pad b col-xs-4"></div>
  <div class="clearfix"></div>
</div>