html - 在移动设备上从右上到下引导网格

Question

场景:

我有一个表单，还有一些额外的“附加”内容，我想在 xs、s 上移至底部，并在 m 和 lg 上向右和顶部 float 。

例如在桌面上:

在电话上:

有什么方法可以用 Bootstrap 来完成这个吗？忽略图像引起的偏移量，我只是担心列顺序和让 E 列向右浮动并在我有足够空间时转到顶部。

Answer 1

使用下面的 fiddle 。尝试在底部本身执行。然后尝试使用全屏再次执行它。

你可以这样做:

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");

.col-md-8 .col-md-12 {background: #99f;}
.col-md-4 .col-md-12 {background: #f99;}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-12">A</div>
        <div class="col-md-12">B</div>
        <div class="col-md-12">C</div>
        <div class="col-md-12">D</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <div class="col-md-12">E</div>
      </div>
    </div>
  </div>
</div>