Question

我怎样才能得到以下行为？

md和lg

------------------------------------------------
|   img-3  |         table-6         | price-3 |
------------------------------------------------

SM

----------------------
|   img-6  | price-6 |
----------------------
|       table-12     |
----------------------

XS

-------------
|   img-12  |         
| table-12  | 
| price-12  |
-------------

非常感谢帮助！

到目前为止，我只设法做了md / lg和xs。但不知怎的，我无法设法获得价格和表格切换以及表格大小为12的sm尺寸。

这是我到目前为止的情况： http://jsbin.com/gupanexasa/edit?html,output

我读到：Bootstrap 3 changing div order on small screens only 和Bootstrap: change div order with pull-right, pull-left / 3 columns

但无法为sm尺寸重现它......

Answer 1

我觉得另一种可能的解决方案更简单：

<div class="container">
 <div class="row">
   <div class="col-md-3 col-sm-6 col-xs-12 img">
     img
   </div>
   <div class="visible-sm col-sm-6 price">
     price
   </div>
   <div class="col-md-6 col-sm-12 col-xs-12 mytable">
     table
   </div>
   <div class="col-md-3 hidden-sm col-xs-12 price">
     price
   </div>
 </div>
</div>

Answer 2

这是经过测试和工作的演示，结帐。

＆＃13;

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


 <div class="row hidden-sm">  <!--hidden for only sm device-->
        <div class="col-md-3 col-lg-3 col-xs-12">img</div>
        <div class="col-md-6 col-lg-6  col-xs-12">table</div>
        <div class="col-md-3 col-lg-3  col-xs-12">price</div>
    </div>
    <div class="row visible-sm"> <!--Visible in sm device-->s
        <div class="col-sm-6">img</div>
        <div class="col-sm-6">price</div>
        <div class="col-sm-12">table</div>
    </div>

＆＃13;

Answer 3

您需要做的是让每个人都在.row（行级）

以下是您的需求：

md和lg （ps：只需将md更改为lg即可将其更改为lg）：

<div class="row">
    <div class="col-md-3 img-3">
        // your stuff
    </div>

    <div class="col-md-6 table-6">
        // your stuff here
    </div>

    <div class="col-md-3 price-3">
        // your stuff here
    </div>
</div>

<强> SM

<div class="row">
    <div class="col-sm-6 img-6">
        // your stuff
    </div>

    <div class="col-sm-6 table-6">
        // your stuff here
    </div>
</div>

<div class="col-sm-12 table-12">
    // your stuff here
</div>

<强> XS

<div class="row">
    <div class="col-xs-12 img-12">
        // your stuff
    </div>

    <div class="col-xs-12 table-12">
        // your stuff here
    </div>

    <div class="col-xs-12 price-12">
        // your stuff here
    </div>
</div>

您也可以删除xs的.row

希望它有所帮助;）

Answer 4

问题是拉/推只会向左或向右移动列，并且在发生溢出时不会将列放在下一行或上一行。如果将'price'列放两次不是问题，可以使用hidden- * classes

See Working demo

<div class="container">
 <div class="row">
   <div class="col-md-3 col-sm-6 img">
     img
   </div>
   <div class="col-md-3 col-sm-6 hidden-lg hidden-md hidden-xs price">
     price
   </div>
   <div class="col-md-6 col-sm-12 mytable">
     table
   </div>
   <div class="col-md-3 hidden-sm col-sm-6 price">
     price
   </div>
 </div>
</div>

使用bootstrap 3更改div顺序

4 个答案: