fandro fandro - 1 year ago 113
CSS Question

How to invert div between different rows bootstrap

I want to place my bootstrap

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
class without result, how can I do it ?

Answer Source

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


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="" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-12 col-lg-8">
    <div class="col-xs-12 col-md-12 col-lg-4">
    <div class="col-xs-12 col-md-8 col-lg-8">
    <div class="col-xs-12 col-md-4 col-lg-4">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download