反转div在移动视图中的显示方式

Question

我在桌面上有一个看起来像附加图像的视图。我正在使用bootstrap。 我希望移动视图看起来像第二个图像。我如何实现它。如果你看到它下拉到底。

桌面视图

移动视图

Answer 1

如果您正在使用bootstraper 3.0及更高版本，则可以将pull-right类添加到每个列。单击“完整页面”以检查桌面视图。

example.com/username

Answer 2

Hacher 你好。您可以使用hidden-xx类以这种方式执行此操作 这是 Fiddle 。

<div class="col-xs-12 col-sm-3 hidden-xs btn btn-success"><h3>Dropdown</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div>  
<div class="col-xs-12 col-sm-3 hidden-sm hidden-md hidden-lg btn btn-success"><h3>Dropdown</h3></div>

你也可以使用一点jquery

以下是 Fiddle 只需调整大小并点击运行或刷新等即可进行更改。

<div class="col-xs-12 col-sm-3 btn btn-success" id="first"><h3>Dropdown</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div>
<div class="col-xs-12 col-sm-3 btn btn-primary" id="last"><h3>Button</h3></div>
<script>   
   if ($(window).width() < 767) {
       $("#first").insertAfter("#last");
    } 
</script> 

Answer 3

执行此操作的正确方法是使用Bootstrap的内置列排序类.col-sm-push-*和.col-sm-pull-*

文档：http://getbootstrap.com/css/#grid-column-ordering

这是代码。

<div class="row">
  <div class="col-sm-3 col-sm-push-3">
    <button class="btn btn-primary">Button 1</button>
  </div>
  <div class="col-sm-3 col-sm-push-3">
    <button class="btn btn-primary">Button 2</button>
  </div>
  <div class="col-sm-3 col-sm-push-3">
    <button class="btn btn-primary">Button 3</button>
  </div>
  <div class="col-sm-3 col-sm-pull-9">
    <select class="form-control"></select>
  </div>
</div>

演示：http://www.bootply.com/mHPiPxZ6YY