2016-10-06 21 views
0

ブートストラップグリッドシステムでpull/push divs of a columnからanother columnまで可能ですか?たとえば:ブートストラップ複合列の配置順序

デスクトップ表示時:それはこの方法のようだ:

Parent Column 1 | Parent Column 2 
First Content | Second Content 
Third Content | Fourth Content 

モバイルビューでは、この方法のようだ:

Parent Column 1 
First Content 
Second Content 
Parent Column 2 
Third Content 
Fourth Content 

私は何を理解するためにthis fiddleに見てみてください。意味するようにしようとしています。

答えて

2

これは、ブートストラップのグリッドを使用して実現できます。

.first { 
 
    background: yellow; 
 
    height: 300px; 
 
} 
 
.second { 
 
    background: red; 
 
    height: 100px; 
 
    color: white; 
 
} 
 
.third { 
 
    background: green; 
 
    height: 300px; 
 
    color: white; 
 
} 
 
.fourth { 
 
    background: blue; 
 
    height: 100px; 
 
    color: white; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 

 
    <div class="row"> 
 
    <div class="col-sm-6 col-xs-12 first"> 
 
     FIRST 
 
    </div> 
 
    <div class="col-sm-6 col-xs-12 second"> 
 
     SECOND 
 
    </div> 
 
    <div class="col-sm-6 col-xs-12 third"> 
 
     THIRD 
 
    </div> 
 
    <div class="col-sm-6 col-xs-12 fourth"> 
 
     FOURTH 
 
    </div> 
 
    </div> 
 
</div>

それとも、Masonry JSを使用することができます。

var $container = $('.masonry-container'); 
 
$container.masonry({ 
 
    columnWidth: '.item', 
 
    itemSelector: '.item' 
 
});
.first { 
 
    background: yellow; 
 
    height: 300px; 
 
} 
 
.second { 
 
    background: red; 
 
    height: 100px; 
 
    color: white; 
 
} 
 
.third { 
 
    background: green; 
 
    height: 300px; 
 
    color: white; 
 
} 
 
.fourth { 
 
    background: blue; 
 
    height: 100px; 
 
    color: white; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 

 
    <div class="row masonry-container"> 
 
    <div class="col-sm-6 col-xs-12 first item"> 
 
     FIRST 
 
    </div> 
 
    <div class="col-sm-6 col-xs-12 second item"> 
 
     SECOND 
 
    </div> 
 
    <div class="col-sm-6 col-xs-12 third item"> 
 
     THIRD 
 
    </div> 
 
    <div class="col-sm-6 col-xs-12 fourth item"> 
 
     FOURTH 
 
    </div> 
 
    </div> 
 
</div>

+0

大画面では、次のようになります。http://i.imgur.com/bsobN7g.png – user1896653

+0

@ user1896653私は自分の答えを更新しました。 –

+0

ありがとう!しかし、私は、デスクトップビューの場合、 "First" divと "Fourth" divの下に "Second" divの下に "Third" divが必要だと思います。 – user1896653

1

私はあなたの列が可変の高さを持っているので、問題はフロート問題のより多くのだと思います。されている

@media (min-width: 992px) { 
    .pull-md-right { 
     float:right; 
    } 
} 

...右大画面上の2番目と3番目のcolumndを引っ張るために特別なクラスを作成し、このようにそれを使用する...ブートストラップ4では

<div class="row"> 
     <div class="col-md-6"> 
      <div class="first">First</div> 
     </div> 
     <div class="col-md-6 pull-md-right"> 
      <div class="second">Second</div> 
     </div> 
     <div class="col-md-6 pull-md-right"> 
      <div class="third">Third</div> 
     </div> 
     <div class="col-md-6"> 
      <div class="fourth">Fourth</div> 
     </div> 
    </div> 

http://codeply.com/go/CYteNdheKS

responsive floats含まれているので、余分なCSSは必要ありません。

+0

ニースのソリューション!しかし、私は、デスクトップビューの場合、 "First" divと "Fourth" divの下に "Second" divの下に "Third" divが必要だと思います。 – user1896653

関連する問題