引导3：推/拉只有较小的屏幕上列尺寸

我有一个页面上的布局如下：引导3：推/拉只有较小的屏幕上列尺寸

<div class="col-lg-3">1</div> 
<div class="col-lg-2">2</div> 
<div class="col-lg-2">3</div> 
<div class="col-lg-2">4</div> 
<div class="col-lg-3">5</div> 

--------- ----- ----- ----- --------- 
| 1 | 2 | 3 | 4 | 5 | 
--------- ----- ----- ----- ---------

但在较小的屏幕尺寸，我想下面的布局：

<div class="col-xs-6">1</div> 
<div class="col-xs-6">5</div> 
<div class="col-xs-4">2</div> 
<div class="col-xs-4">3</div> 
<div class="col-xs-4">4</div> 

----------------- ----------------- 
|  1  |  5  | 
----------------- ----------------- 
|  2  |  3  |  4  | 
----------- ----------- -----------

（请注意重新排列列顺序。）是否可以仅在较小的屏幕尺寸上推/拉列？我试过以下，但我得到的最奇怪的布局，似乎完全失去<div>5</div> ...：

<div class="col-lg-3 col-xs-6">1</div> 
<div class="col-lg-2 col-xs-4 col-xs-push-4">2</div> 
<div class="col-lg-2 col-xs-4>3</div> 
<div class="col-lg-2 col-xs-4>4</div> 
<div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div>

来源

2014-02-21 mpdc

136

回答了我自己，简单地思考：移动第一！

<div class="col-lg-3 col-xs-6">1</div> 
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div> 
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div> 
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div> 
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div>

让他们按照我想要在平板电脑上的顺序，然后将它们推入/拉入桌面。

来源

2014-02-21 13:07:26 mpdc

+15

是的，这是应该做的正确方法，因为自举（3）** [本身就是移动优先]（http://getbootstrap.com/css/#overview-mobile）**。 – zessx

事实上，这个解决方案效果很好http://bootply.com/SF3lEO5Ex4 – ZimSystem

今天，我学习了我的教训与boostrap ... **认为移动第一**。谢谢！ – Equiman

我（在类似的路线仍然）略有不同的要求

下面让我有：

<div class="row"> 
    <div class="col-lg-1 col-xs-2">TIME</div> 
    <div class="col-lg-5 col-xs-6">EVENT</div> 
    <div class="col-lg-2 col-xs-4">STATUS</div> 

    <div class="col-xs-2 visible-xs"></div> @*offset for xs*@ 

    <div class="col-lg-2 col-xs-6">START LIST</div> 
    <div class="col-lg-2 col-xs-4">RESULTS</div> 
</div>

来源

2014-08-28 13:38:42

引导3：推/拉只有较小的屏幕上列尺寸

回答

相关问题