如何实现Bootstrap布局？

我有一个Bootstrap布局，我想创建，但我无法弄清楚我将如何完成它。基本上，在桌面尺寸上，布局将按顺序依次排列为4列，6列和2列，然后移动，我希望4列和2列依次排列其他和6列下降。如何实现Bootstrap布局？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-8 col-sm-4"> 
 
     A 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     B 
 
    </div> 
 
    <div class="col-xs-4 col-sm-2"> 
 
     C 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    </div> 
 
</div>

所以在移动我想 “A” 和 “C” 是内联和 “B” 为低于 “A” 一个完整的12列和 “C”

来源

2016-05-17 user13286

您可以定期引导推做到这一点，拉，不需要靠绝对定位。见引导文档浏览：http://getbootstrap.com/css/#grid-column-ordering

轻松改变我们内置的网格列的顺序与.COL-MD-推*和.COL-MD-上拉*修饰符的类。

来源

2016-05-17 15:21:54

没错，这里有一个例子：[的jsfiddle（https://jsfiddle.net/znwsk6fw/1/） –

谢谢你的建议，并感谢您的例子@azeós，这完美地工作。 – user13286

你可以尝试这样的事情： - 只要这个容器是相对的，它应该没问题。

https://jsfiddle.net/znwsk6fw/

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-8 col-sm-4"> 
     A 
    </div> 
    <div class="col-sm-6 col-md-6 col-xs-12 "> 
     B 
    </div> 
    <div class="col-xs-4 col-sm-2 col-md-2 column_c"> 
     C 
    </div> 
    <div class="clearfix"></div> 
    </div> 
</div> 

@media screen and (max-width:768px) { 
    .column_c { 
    position:absolute; 
    right:0; 
    } 
}

来源

2016-05-17 15:13:22

如何实现Bootstrap布局？

回答

相关问题