移动视图引导程序 3 底部一行的第一列

Question

我有两列连续。

    <div class="row">
      <div class="col-lg-2">
         I want this column in bottom side on mobile.
      </div>
      <div class="col-lg-8">
         I want this column in top side on mobile.
      </div>
   </div>

当我在笔记本电脑上看到它时，它们分别在左侧和右侧。当我在手机上观看页面时 phone 我看到网页顶部的第一列。

我想更改顺序，第一列左侧一侧在笔记本电脑和底部 ] 在 移动设备上 phone 的实例 第一列 即 左侧 笔记本电脑 上的侧面 和 移动设备 phone 上的顶部。

我想保留笔记本电脑方面，只更改手机 phone 视图。

Answer 1

~~加class大div.pull-left,小div.pull-right~~

<div class="row">
      <div class="col-lg-2 pull-right">
         I want this column in bottom side on mobile.
      </div>
      <div class="col-lg-8 pull-left">
         I want this column in top side on mobile.
      </div>
   </div>

~~这会将第二个较大的 div 浮动到左侧，因此在 .col-lg-8 不适用的移动视图中，会将其置于顶部~~

编辑： 因为这个答案在两个 div 之间造成了差距，因为只使用了 10 列

您需要更改 html 看这个 http://jsfiddle.net/53u69ama/1/

<div class="row">
    <div class="col-sm-8 col-xs-12 ">
         I want this column in top side on mobile.
      </div>
      <div class="col-sm-2 col-xs-12 ">
         I want this column in bottom side on mobile.
      </div>

   </div>

编辑 2： 您也可以使用 position 样式更改顶部位置，但这需要您为一个 div 设置静态顶部。或者您可以使用 javascript 动态更改它。

看到这个http://jsfiddle.net/53u69ama/2/

Answer 2

查看Bootstrap 3 的网格系统的文档：

http://getbootstrap.com/css/#grid

通过添加 *-lg 类，您只指定了页面在大屏幕上的表现方式。

您可能想要添加 *-xs 类以定义智能手机宽度中的列。您可以保持 *-lg 类原样。

此外，为了改变不同宽度的列的顺序，bootstrap提供了*-push和*-pull类，参见这里：http://getbootstrap.com/css/#grid-column-ordering

Answer 3

解决方案：

    <div class="row">
      <div class="col-lg-8 col-lg-push-2">
        I want this column in top side on mobile.
      </div>
      <div class="col-lg-2 col-lg-pull-8">
        I want this column in bottom side on mobile.
      </div>
    </div>

Answer 4

使用这个

<div class="row">
    <!-- this is visible if view is all less lg (on top) -->
    <div class="device-xs visible-xs device-sm visible-sm device-md visible-md">
        <div>
            Content to view 2.
        </div>
    </div>
    <div class="col-lg-2">
        Content to view 1
    </div>
    <!-- this is visible when view is lg (in right) -->
    <div class="col-lg-8 device-lg visible-lg">
        Content to view 2.
    </div>
</div>

请注意，您必须复制 "Content to view 2." 两次。

移动视图引导程序 3 底部一行的第一列

first column of a row to bottom side on mobile view boostrap 3

css

twitter-bootstrap-3