是否可以选择跨度的堆叠顺序? [英] Is it possible to choose the stacking order of spans?

问题描述

我正在使用 Twitter Bootstrap 开始一个项目，它很像响应式 css，当视口变小时，使跨度堆叠在一起.

鉴于以下设计:，我希望它能像你想要的那样工作.

I'm starting a project with Twitter Bootstrap, and quite like the responsive css, making the spans stack on top of each other when the viewport gets smaller.

Given the following design: http://jsfiddle.net/kJp6J/1/

Is it possible to choose which block will be stacked first on small screens? In my case, I'd like the block on the right to appear first, followed by the blocks on the left.

Is there a way to do this?

解决方案

HTML

Wrap your content with .container, put that big block on the first place, add .pull-right so it will appear right:

<div class="container">
  <div class="row">
    <div class="span4 pull-right">
      <img src="http://placehold.it/280x180">
    </div>
    <div class="span8">
      <!-- ... -->
    </div>
  </div>
</div>

CSS

When on mobile, place it where it should be with float:none:

@media (max-width: 767px) {
  [class*="span"].pull-right {
    float: none;
}

Here's fiddle, I'll hope it works like you want it.

这篇关于是否可以选择跨度的堆叠顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！