How to use bootstrap column to span multiple rows and change order?

Question

I know there is many bootstrap questions but I didn't find solution for this and I am trying to solve it without javascript. I need to have this kind of layout:

And then for mobile view a need to insert div 2 under div 1 to look like this:

I was trying to do it using nested rows and ordering with push/pull, but with no success, since when divs 1 and 3 are nested in separate row, a don't know hot to "insert" div 2 between.

Answer 1

You can use bootstrap columns with a media query to get the desired behaviour:

1) Create the 3 columns like you normally would in HTML (see example code)

2) Use a media query to float the second div to the right at a certain breakpoint

Example code:

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 2

In Bootstrap you can add multiple size columns in the same class, so that you get the behavior you desire depending on the size of the screen. Here's an example from the Bootstrap site:

`<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>`

Here's the link for more info: http://getbootstrap.com/css/

Answer 3

In your html, make sure the elements 1, 2, and 3 are in that order on the page. Add float: left to 1 and 3 and float: right to 2. When there's enough room in the container that houses all three, they'll separate as you wish in the top part of your example. When the container that houses all three narrows such that 1, 2, and 3 cannot fit side-by-side, they'll line themselves up vertically in the order they're presented in the html. Which would match the bottom part of your example.

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;
}