如何更改Twitter Bootstrap 3中的div col顺序

时间:2013-09-26 20:00:13

标签: css twitter-bootstrap responsive-design twitter-bootstrap-3

我正在尝试在移动视图中更改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 demo

2 个答案:

答案 0 :(得分: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>

(我会对它进行测试,但是您的演示链接只会导致错误消息,而且我懒得制作自己的演示。)

答案 1 :(得分: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 documentation

上阅读更多内容