html - 如何在移动模式下拆分 Bootstrap 列

Question

我创建了一个带有顶部工具栏和两列的 Bootstrap 页面。在左栏我放了菜单和一小块文本(也许我会分成两部分)。在右栏中，我有一个很大的空间，可以根据我在菜单上选择的内容显示元素(带有 img 的 div)。

该设计在计算机上运行良好，但当我在移动设备上打开时，我想移动移动页面末尾左栏的文本 block 。

顶部布局显示了它在 PC 上的外观。左下角是我希望能够做的。右下角是我想做的另一个版本。

现在，在移动模式下，我只能在菜单后面显示大文本框。

我的代码是这样的:

<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3" id="menu">..
<div id="text"></div></div>
<div class="col-xs-12 col-sm-9 col-md-9">
<div class="container">
 ...items
</div>
</div> <!-- row..useless probably -->

我应该如何分割div？

Answer 1

一个文本框

按顺序排列方 block ，这是移动屏幕所必需的。然后使 menu 在宽屏上右浮动。

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

#menu    { background: #cf9; height:  50px; }
#toolbar { background: #f9c; height:  50px; }
.items   { background: #9cf; height: 250px; }
.textbox { background: #fc9; height: 200px; }

@media (min-width: 768px) {
  .items  {
    float: right !important;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12" id="toolbar">Toolbar</div>
    <div class="col-sm-3"  id="menu">Menu</div>
    <div class="col-sm-9 items">Items</div>
    <div class="col-sm-3 textbox">Textbox</div>
  </div>
</div>

两个文本框

将 menu 和 textbox 1 包装到一个附加 block 中。那么问题就会和上一个类似。

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

#menu    { background: #cf9; height:  50px; }
#toolbar { background: #f9c; height:  50px; }
.items   { background: #9cf; height: 250px; }
.textbox { background: #fc9; height: 100px; }

@media (min-width: 768px) {
  .items  {
    float: right !important;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12" id="toolbar">Toolbar</div>
    <div class="col-sm-3">
      <div class="row">
        <div class="col-sm-12" id="menu">Menu</div>
        <div class="col-sm-12 textbox">Textbox 1</div>
      </div>
    </div>
    <div class="col-sm-9 items">Items</div>
    <div class="col-sm-3 textbox">Textbox 2</div>
  </div>
</div>