如何在Bootstrap中实现所需的浮动？

Question

我正在尝试使用bootstrap构建页面。我想创建一个我在很多营销页面上看到的布局：

我目前正在设置浮动和边距并获得一些不稳定的结果。当页面调整大小时，文本不会在图像周围流动，并且在窗口改变时不保持其垂直位置对齐。最后，当页面调整大小/移动用户访问页面时，它应该响应如下：

• 图像
• 段落
• 横向规则
• 图像
• 段落
• 横向规则
• 等等...

相反，使用我当前的HTML，我在移动设备上获得以下内容：

• 图像
• 段落
• 横向规则
• 段落
• 图像
• 横向规则
• 等等...

这是我到目前为止的代码：

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <img class="do-icon-left img-responsive" alt="Terminal"
           src="https://cdn4.iconfinder.com/data/icons/web-pages-seo/512/13-512.png" />
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
      </p>
    </div>
    <div class="clearfix"></div>
    <hr>
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <p class="do-feature-left">
        The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
      </p>
      <img class="do-icon-right img-responsive" alt="Terminal"
           src="https://cdn4.iconfinder.com/data/icons/web-pages-seo/512/13-512.png" />
    </div>
  </div>
</div>

.do-icon-left {
  float:left;
  margin-right: 100px;
  width:287px;
}
p.do-feature {
  margin-top:120px;
}
p.do-feature-left {
  float: left;
  margin-right: 100px;
  width:350px;
}
.do-icon-right {
  width: 287px;
  float:right;
}

Here's a demo in jsFiddle

如何使用Bootstrap类来正确构建它？

Answer 1

但是，您在DOM中排列的项目是它们在移动视图中的显示方式。因此，如果您想要首先拍摄照片，则需要先放置照片。然后，在更宽的屏幕上将图像推到或拉到侧面。

为此，您需要使用col-*-push-*和col-*-pull-*

查看column ordering

Stack Snippets中的演示

.circle {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #278382;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">

    <div class="col-md-2">
      <div class="circle"></div>
    </div>
    <div class="col-md-10">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

    <div class="clearfix"></div><hr/>

    <div class="col-md-2 col-md-push-10">
      <div class="circle"></div>
    </div>
    <div class="col-md-10 col-md-pull-2">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

    <div class="clearfix"></div><hr/>

    <div class="col-md-2">
      <div class="circle"></div>
    </div>
    <div class="col-md-10">
      <p class="do-feature">
        The quick brown fox jumped over the lazy dog.
        The quick brown fox jumped over the lazy dog.
      </p>
    </div>

  </div>
</div>