用引导3改变div顺序

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

我读到：引导3只在小屏幕上更改div顺序和引导:用右拉/拉左/3列改变div顺序

但无法复制它的大小..。

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

这是测试和工作演示，检查。

​

<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>

​

Answer 3

您需要做的是在.row (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。

希望它有帮助;)