ブートストラップの列

Question

これは、私が今のところ小型デバイスで持っているものです。

これは、上記画像のためのコードです。

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="alert alert-info">Chart 1</div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="alert alert-info">Chart 2</div> 
    </div> 
    <div class="col-sm-12"> 
     <div class="alert alert-danger">Legend</div> 
    </div> 
</div> 

これは、順番は次のようである余分な小型デバイスに表示されます：

Chart 1 
Chart 2 
Legend 

これは私が後だ何を期待されないが、。

Chart 1 
Legend 
Chart 2 

これはブートストラップで可能ですか？

Answer 1

はここにあなたの固定コード

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="alert alert-info">Chart 1</div> 
    </div> 
    <div class="visible-sm visible-xs hidden-md hidden-lg"> 
     <div class="col-sm-12"> 
     <div class="alert alert-danger">Legend</div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="alert alert-info">Chart 2</div> 
    </div> 
    <div class="hidden-sm hidden-xs visible-md visible-lg"> 
    <div class="col-sm-12"> 
     <div class="alert alert-danger">Legend</div> 
    </div> 
    </div> 
</div> 

乾杯です！

Answer 2

追加のブロックにブロックAとBをラップし、ワイドスクリーンでブロックBの幅を増やすことができます。

ブロックCがブロックAよりも高くない場合、このソリューションはうまくいきますが、ブロックBを2回繰り返す必要はありません。

https://codepen.io/glebkema/pen/YVVvVL

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
/* Heart of the matter */ 
 
@media (min-width: 768px) { 
 
    .col-sm-double-width { 
 
    margin-right: -100%; 
 
    width: 200%; 
 
    } 
 
} 
 

 
/* Decorations */ 
 
.container { 
 
    margin-top: 14px; 
 
} 
 
.col-a, 
 
.col-b, 
 
.col-c { 
 
    color: #fff; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
    min-height: 80px; 
 
    padding-top: 6px; 
 
} 
 
.col-a { background: #9c6; } 
 
.col-b { background: #f93; } 
 
.col-c { background: #69c; }

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="row"> 
 
     <div class="col-xs-12 col-a">A</div> 
 
     <div class="col-xs-12 col-b col-sm-double-width">B</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6 col-c">C</div> 
 
    </div> 
 
</div>