引导：类似行为浮动可能吗？(Bootstrap: behaviour similar to floa

我建了一个网站，引导3，它有一个新闻栏目，其中每个新闻文章看起来应该像下面这样：

移动第一：

------------
|  Title   |
------------
------------
|  Img     |
------------
------------
|  Content |
|  Content |
------------

在更大的屏幕：

---------------------------
|  Img  |  Title          |
|       |------------------
|-------|  Content        |
|       |  Content        |
---------------------------

我不想浮在图片周围的内容，它应该留在其列，这就是为什么我寻求引导来解决这个问题。

我看了一眼那两个文章，但他们并没有完全TAKLE我的问题：

• 引导：改变DIV以便与右拉式，拉左/ 3列
• https://scotch.io/tutorials/reorder-css-columns-using-bootstrap

更新 ：发现这个问题 ，涵盖了类似的情况。 但打勾解决方案提出浮动。 这是唯一的办法？

Answer 1:

<div class="container">
    <div class="row">
    <div class="col-sm-4 col-md-push-4">Title</div>

      <div class="row">
        <div class="col-sm-12 col-md-4 col-md-pull-4">Img</div>
        <div class="col-sm-12 col-md-4 col-md-push-4">
          Content  <br/>
          content
        </div>
      </div>
  </div>
</div>

这应该做的伎俩。 这里有一个bootply http://www.bootply.com/xTBHlj60ws

Answer 2:

如果你不介意额外的HTML

<div class="container">
    <div class="row">
        <div class="col-md-4 hidden-sm hidden-xs">
            img
        </div>
        <div class="col-sm-12 col-md-8">
            <div class="row">
                <div class="col-sm-12">
                    title
                </div>
                <div class="col-sm-12  hidden-md hidden-lg">
                    img
                </div>
                <div class="col-sm-12">
                    content
                    <br />content
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3:

我打得四处的乔·斯温德尔的答案 。 它不与引导网格对齐。 而且它仅使用8而不是12列。

这里是他的代码的简化版本，效果更好。

<div class="container"> 
    <div class="row">
        <div class="col-md-8 col-md-push-4">Title</div>         
        <div class="col-md-4 col-md-pull-8">Img</div>
        <div class="col-md-4 col-md-push-4">Content</div>
    </div>
</div>  

但它并不完美。 我写了一个第二个问题： 引导：为什么此列不浮动，我怎样才能改变这种状况？

文章来源: Bootstrap: behaviour similar to float possible?