我必须重新排列小屏幕中按以下顺序排列的列 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
我尝试了一些,但它破坏了设计,不确定它是否适用于三列。
最佳答案
当您使用 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>
关于html - Bootstrap 推拉 3 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50113017/