html - 如果使用 Bootstrap 在移动屏幕中显示图像和文本，则显示不同的排列

Question

我正在使用以下代码，但无法在移动屏幕中获取图片下方的描述。如何更改代码？它寻找全屏/桌面的方式是正确的。对于尺寸“sm”，我希望它重新排列文本和图像。

我正在寻找的顺序:桌面 - 左侧标题和描述，右侧图像。

移动版 - 标题在最上面，然后是图片，然后是描述。

代码:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <h1 id="title">Title ....................................... more text </h1> 
        <h3 id="description">description ....................................... more description.................... ....................................... more description ....................................... more description....................................... </h3> 
      </div>
      <div class="col-md-6">
        <img src="http://www.unoosa.org/res/timeline/index_html/space-2.jpg" class="img-responsive">
      </div>
    </div>

Answer 1

我已经改变了 html 的安排，并将 classes 给 float 图像给 right 和 text 给 left 或者您可以使用 twitter-bootstrap 提供的 pull-right 和 pull-left 类。

twitter-bootstrap 还提供了一些隐藏类，您可以使用它们来实现您想要的布局。

Source

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.float-right {
  float: right
}
.float-left {
  float: left
}
</style>
<div class="container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 float-right">
        <h1 id="title" class="hidden-md hidden-lg">Title....................................... more text</h1>
        <img src="http://www.unoosa.org/res/timeline/index_html/space-2.jpg" class="img-responsive">
      </div>
      <div class="col-md-6 float-left">
        <h1 id="title" class="hidden-sm hidden-xs">Title....................................... more text</h1>
        <h3 id="description">description.......................................more description....................       ......................................more description     .......................................                         more description.......................................</h3>
      </div>
    </div>