Question

我知道有很多引导问题，但我没有找到解决方案，我试图在没有javascript的情况下解决它。我需要这种布局：

然后对于移动视图，需要在div 1下插入div 2，如下所示：

我试图使用嵌套行和推/拉顺序来做，但没有成功，因为当div 1和3嵌套在单独的行中时，不知道热到“插入”div 2之间。

Answer 1

在Bootstrap中，您可以在同一个类中添加多个大小的列，以便根据屏幕大小获得所需的行为。以下是Bootstrap网站的一个例子：

`<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>`

以下是更多信息的链接：http://getbootstrap.com/css/

Answer 2

您可以将bootstrap列与媒体查询一起使用以获得所需的行为：

1）像在HTML中一样创建3列（参见示例代码）

2）在特定断点处使用媒体查询将第二个div 浮动到右侧

示例代码：

<强> CSS

 @media (min-width: 768px) {
         .col2 {
            background-color: blue;
            float: right;
      }

<强> HTML

<div class="container">
    <div class="row">
        <div class="col1 col-sm-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Audeo dicere, inquit. Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus? Duo Reges: constructio interrete. </p>

            <p>Sed haec in pueris; Prodest, inquit, mihi eo esse animo. Quo igitur, inquit, modo? Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Ut optime, secundum naturam affectum esse possit. Scio enim esse quosdam, qui quavis lingua philosophari possint; Egone non intellego, quid sit don Graece, Latine voluptas? Quippe: habes enim a rhetoribus; </p>

            <p>Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Faceres tu quidem, Torquate, haec omnia; Iam in altera philosophiae parte. Philosophi autem in suis lectulis plerumque moriuntur. Negat enim summo bono afferre incrementum diem. Nonne igitur tibi videntur, inquit, mala? </p>

        </div>

        <div class="col2 col-md-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Audeo dicere, inquit. Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus? Duo Reges: constructio interrete. </p>

            <p>Sed haec in pueris; Prodest, inquit, mihi eo esse animo. Quo igitur, inquit, modo? Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Ut optime, secundum naturam affectum esse possit. Scio enim esse quosdam, qui quavis lingua philosophari possint; Egone non intellego, quid sit don Graece, Latine voluptas? Quippe: habes enim a rhetoribus; </p>

            <p>Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Faceres tu quidem, Torquate, haec omnia; Iam in altera philosophiae parte. Philosophi autem in suis lectulis plerumque moriuntur. Negat enim summo bono afferre incrementum diem. Nonne igitur tibi videntur, inquit, mala? </p>

            <p>Sed ego in hoc resisto; Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Nunc haec primum fortasse audientis servire debemus. Facile est hoc cernere in primis puerorum aetatulis. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Sed non sunt in eo genere tantae commoditates corporis tamque productae temporibus tamque multae. Quae tamen a te agetur non melior, quam illae sunt, quas interdum optines. </p>

            <p>Suo genere perveniant ad extremum; Eiuro, inquit adridens, iniquum, hac quidem de re; Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Nobis aliter videtur, recte secusne, postea; </p>

        </div>

        <div class="col3 col-sm-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Audeo dicere, inquit. Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus? Duo Reges: constructio interrete. </p>

                <p>Sed haec in pueris; Prodest, inquit, mihi eo esse animo. Quo igitur, inquit, modo? Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Ut optime, secundum naturam affectum esse possit. Scio enim esse quosdam, qui quavis lingua philosophari possint; Egone non intellego, quid sit don Graece, Latine voluptas? Quippe: habes enim a rhetoribus; </p>
        </div>      
    </div>
  </div>

Answer 3

在你的html中，确保元素1,2和3在页面上按顺序排列。将float: left添加到1和3以及float: right添加到2.当容器中有足够的空间容纳所有三个时，他们会根据您的意愿将您的顶部分开例。当容纳所有三个狭窄的容器使得1,2和3不能并排放置时，它们将按照它们在html中呈现的顺序垂直排列。哪个与你的例子的底部相匹配。

HTML：

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

的CSS：

.one,
.three {
  float: left;
}

.two {
  float: right;
}

如何使用bootstrap列跨越多行并更改顺序？

3 个答案: