jquery - 如何使用 Bootstrap 更改 div 的顺序

Question

我有一个基于 Bootstrap 的布局(使用 WP 中的 Visual composer 制作)，具有交替的行，代码看起来有点像这样:

<div class="custom-row">
 <div class="row">
  <div class="span8">
   <img>
  </div>
  <div class="span4">
   <p>some content</p>
  </div>
 </div>
</div>
<div class="custom-row">
 <div class="row">
  <div class="span4">
   <p>some content</p>
  </div>
  <div class="span8">
   <p>some content</p>
  </div>
 </div>
</div>

问题是在小屏幕上，它们像这样堆叠在一起: - img - 文本 - 文本 - img 但我想得到一个堆栈，如:一个图像/一个文本，而不是 2 个文本相互跟随。我尝试了拉和推技巧，但它没有做任何事情。

感谢您的帮助!

Answer 1

这是因为您的列位于不同的 div 中。删除它们，它应该可以工作。

html

<div class="row">
  <div class="bordered col-md-9 col-md-push-3">col A</div>
  <div class="bordered col-md-3 col-md-pull-9">col B</div>
</div>

CSS

.bordered{
    border: 1px solid black;
}

这是一个 fiddle http://jsfiddle.net/4cbzY/371/