使用Bootstrap 3更改节顺序 [英] Change section order with Bootstrap 3

问题描述

在一个页面上，我有两列。在第一个（黑色），我有一个包含图像的部分。第二个，有两个块（蓝色和绿色）。

我想改变三个部分的顺序，就像我在这个模式中做的那样：

解决方案

适应的方法来自伊舍伍德在这个非常相似的问题中的回答：

有他们

  
 code>< div class =container> 
< div class =row> 
< div class =col-xs-12 col-sm-6 blue pull-right>< / div> 
< div class =col-xs-12 col-sm-6 black pull-left>< / div> 
< div class =col-xs-12 col-sm-6 green pull-right>< / div> 
< / div> 
< / div> 
  

演示在小提琴

On a page I have two columns. On the first one (black), I have one section which contains an image. The second one, has two blocks (blue and green).

I want to change the order of the three sections like in this schema I have made:

I found some way of doing with push and pull, but it's only put the black block last instead of first.

解决方案

Adapted from Isherwood's answer in this very similar question:

Have them in order on a small screen, and then on a larger screen, pull them to the appropriate side of the page:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 blue pull-right"></div>
        <div class="col-xs-12 col-sm-6 black pull-left"></div>
        <div class="col-xs-12 col-sm-6 green pull-right"></div>
    </div>
</div>

Demo in Fiddle

这篇关于使用Bootstrap 3更改节顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！