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

Mills 发表于 Dev

米尔斯

我正在尝试在移动视图的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演示

笨蛋

一种这样做的丑陋方法是首先考虑移动性。按希望它们以xs / sm堆叠的方式对列进行排序，然后使用推和推将列重新排序以适应更大的屏幕。这样的事情应该起作用：

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

（我已经测试过了，但是您的演示链接只会导致错误消息，而且我懒得制作自己的演示。）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。