9

我正在尝试在移动视图中更改 Twitter Bootstrap 中 div col 的堆栈顺序。我希望 col-md-7 中的文本在移动视图中被拉到 col-md-5 中的图像顶部，但是在桌面上查看时 div col 保持不变。

这是我正在使用的代码

  <div class="row featurette">
    <div class="col-md-5">
      <img class="featurette-image img-responsive" src="http://i.imgur.com/O7KC6ak.png" alt="Generic placeholder image">
    </div>
    <div class="col-md-7">
      <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
      <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
  </div>

这是我正在尝试完成的 Bootly 演示 Bootly 演示

4

2 回答 2

8

一种丑陋的方法是首先考虑移动。为 xs/sm 按您希望它们堆叠的方式对列进行排序，然后使用 pull 和 push 对它们重新排序以适应更大的屏幕。像这样的东西应该工作：

  <div class="row featurette">
    <div class="col-md-7 col-md-push-5">
      <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
      <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
    <div class="col-md-5 col-md-pull-7">
      <img class="featurette-image img-responsive" src="http://i.imgur.com/O7KC6ak.png" alt="Generic placeholder image">
    </div>
  </div>

（我会对其进行测试，但是您的演示链接只会导致错误消息，而且我懒得制作自己的演示。）

于 2013-09-27T03:03:30.740 回答
0

尝试使用以下推拉类：

<div class="row featurette">
<div class="col-md-5 col-md-push-7">
  <img class="featurette-image img-responsive" src="http://i.imgur.com/O7KC6ak.png" alt="Generic placeholder image">
</div>
<div class="col-md-7 col-md-pull-5">
  <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
  <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>

您可以阅读更多关于 bootstrap 3 的CSS 文档

于 2013-09-26T20:23:29.843 回答