![](/img/trans.png)
[英]Bootstrap col-12 on small screens and fixed length on larger screens
[英]Bootstrap 3 row and col order on small screens
我有以下結構
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
引導程序是否有可能在小屏幕上輕松顯示以下順序?
| box1 |
| box3 |
| box2 |
我不知道如何以這種方式交換行。 謝謝
而不是將box列放在其他行中。 您可以將所有box列放在同一行中。 您可以使用col-sm-push-*
或col-sm-pull-*
實用程序在引導程序中實現列順序。
在此處查看演示
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.