fandro fandro - 5 months ago 24
CSS Question

How to invert div between different rows bootstrap

I want to place my bootstrap

div
for my 3 type of screen:

For the web it must be like this :

<div class="col-lg-8">A</div> <div class="col-lg-4">B</div>
<div class="col-lg-8">C</div> <div class="col-lg-4">D</div>


for the tablets it must be like this :

<div class="col-md-12">A</div>
<div class="col-md-12">C</div>
<div class="col-md-6">B</div><div class="col-md-6">D</div>


and for the phones it must be like this :

<div class="col-sm-12">A</div>
<div class="col-sm-12">B</div>
<div class="col-sm-12">C</div>
<div class="col-sm-12">D</div>


Is it possible to do that with bootstrap all in one ?

It's a lite bit tricky because the blocks B and C are inverted between the tablets and the phones. I try to use the
pull
class without result, how can I do it ?

Answer

You can use md-8 + md-4 (can be 7 + 5, all it matters is the sum is no more than 12) in a new .row

to change the order, you can use order from flexbox within the tablet media query

Note: You can use an attribute selector ^= to select every col- to style every col-*-*

[attr^=value]

Represents an element with an attribute name of attr and whose first value is prefixed by "value".

[class^="col-"] > div {
  background: lightgreen;
  margin: 20px 0
}
@media (min-width: 992px) and (max-width: 1170px) {
  .row {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%
  }
  .row > div:nth-of-type(2) {
    order: 1;
    width: 66.66%;
  }
  .row div:nth-of-type(3) {
    width: 100%;
  }
  .row > div:nth-of-type(4) {
    order: 1
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-12 col-lg-8">
      <div>A</div>
    </div>
    <div class="col-xs-12 col-md-12 col-lg-4">
      <div>B</div>
    </div>
    <div class="col-xs-12 col-md-8 col-lg-8">
      <div>C</div>
    </div>
    <div class="col-xs-12 col-md-4 col-lg-4">
      <div>D</div>
    </div>
  </div>
</div>

Comments