Bootstrap推拉式三列
[英]Bootstrap Push and Pull with 3 column
問題描述
我必須在小屏幕列中重新排列列，按以下順序1,2,3應該在小屏幕中顯示為3,1,2。
它可以與兩個很好地工作，但是我不確定如何使它與具有以下結構的三列一起工作
<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-md-6" style="background-color:lavender;">1</div>
<div class="col-md-3" style="background-color:lavenderblush;">2</div>
<div class="col-md-3" style="background-color:green;">3. This should be first one on small screen</div>
</div>
</div>
https://codepen.io/anon/pen/zjZJRG
我嘗試了幾次，但是不確定是否可以在三列中使用，這破壞了設計。
2 個解決方案
解決方案1
2 2018-05-01 07:51:49
在使用BS3時，可以使用以下HTML結構：
<div class="row">
<div class="col-xs-12 col-md-3 pull-right">3</div>
<div class="col-xs-12 col-md-6">1</div>
<div class="col-xs-12 col-md-3">2</div>
</div>
演示：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <h1>Push and Pull</h1> <p>Resize the browser window to see the effect.</p> <div class="row"> <div class="col-xs-12 col-md-3 pull-right" style="background-color:green;">3. This should be first one on small screen</div> <div class="col-xs-12 col-md-6" style="background-color:lavender;">1</div> <div class="col-xs-12 col-md-3" style="background-color:lavenderblush;">2</div> </div> </div>
解決方案2
1 2018-05-01 07:55:09
如果使用的是Bootstrap 4，則可以使用flex類進行管理。 在這種情況下，您可以使用order- *。
<html> <head> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <h1>Push and Pull</h1> <p>Resize the browser window to see the effect.</p> <div class="row d-flex"> <div class="col-md-6 order-sm-2" style="background-color:lavender;">1</div> <div class="col-md-3 order-sm-1" style="background-color:lavenderblush;">2</div> <div class="col-md-3 order-sm-0" style="background-color:green;">3. This should be first one on small screen</div> </div> </div> </body> </html>
Bootstrap推/拉列問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.