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;
}

这是一个小提琴http://jsfiddle.net/4cbzY/371/

Answer 2

试试这个。但是你有旧版本的bootstrap。

<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="span8">
   <img>
  </div>
  <div class="span4">
   <p>some content</p>
  </div>
 </div>
</div>

如何使用Bootstrap更改div的顺序

2 个答案: