Bootstrap中的列

這就是我目前在小型設備上的情況。Bootstrap中的列

這是上面的圖像的代碼。

<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

這可能使用Bootstrap？

來源

2017-05-01 Høgsdal

我首先想到用'COL-SM-推x'和'COL-SM-拉y'但它並不像她那樣的意志工作 –

你可以使用引導列排序.col-xs-push- *和.col-xs-pull- *看看http://getbootstrap.com/css/ –

這是你的固定碼

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

乾杯！

來源

2017-05-01 08:32:33

這可能是最好的解決方案，但我希望使用'col-sm-push-x'和'col-sm-pull-y'，而不必重複我的代碼。 –

您可以將塊A和塊B包裝到一個附加塊中，並在寬屏幕上增加塊B的寬度。

如果塊C不高於塊A，則此解決方案可以很好地工作。但是，您不必重複塊B兩次。

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>

來源

2017-05-01 10:07:17

Bootstrap中的列

回答

相關問題