Reordering Divs Responsively with Twitter Bootstrap

Reordering divs responsively with Twitter Bootstrap?

Users of Bootstrap 4 or Bootstrap 5 will want to see this question:
Bootstrap change order of columns

Bootstrap 3 (original answer)

I think you want to look at the push and pull classes...

<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
   <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
   <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
</div>

Demo: http://bootply.com/77853

Reorder divs with responsive in Bootstrap 5.0

The easiest way would be to "disable" flexbox on specific breakpoints which will allow the floats to work. This can be done using all Bootstrap 5 classes so there's no extra CSS...

<div class="container">
    <div class="row g-3 d-flex d-md-block">
        <div class="col-md-6 float-start">
            <div class="card card-body">A</div>
        </div>
        <div class="col-md-6 float-end">
            <div class="card card-body tall">C</div>
        </div>
        <div class="col-md-6 float-start">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

Floats in Bootstrap 5 demo

Alternately, you can use the new CSS-grid classes in Bootstrap 5. However this requires that you $enable-cssgrid with SASS:

<div class="container">
    <div class="grid">
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">A</div>
        </div>
        <div class="g-col-md-6 g-col-12" style="grid-row: span 2;">
            <div class="card card-body tall">C</div>
        </div>
        <div class="g-col-md-6 g-col-12">
            <div class="card card-body">B</div>
        </div>
    </div>
</div>

CSS grid demo

Related: Bootstrap with different order on mobile version

How can I rearrange divs in bootstrap?

Use JavaScript sort() function:

Example: (do not copy/paste)

var obj = [];var example = ["A", "C", "B"];$.each($("div"), function(index, value) {    obj[index] = $(this);});
obj.sort(function(a, b) {  var A = example.indexOf(a.text().trim());    var B = example.indexOf(b.text().trim());      if (A < B) {    return -1;    }    if (A > B) {    return 1;    }    return 0;});
$("body").prepend(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="col-lg-4"> A</div><div class="col-lg-4"> B </div><div class="col-lg-4"> C </div>

How to responsively order right side blocks to top and bottom of left side block with bootstrap

Here you go...

#a,
#b-desktop,
#b-mobile,
#c {
  border: 1px solid red;
  font-size: 50px;
  font-weight: 700;
}

.container-fluid>.row {
  height: 100vh;
}

#b-desktop {
  height: 100%;
}

#b-mobile {
  height: 50vh;
}

#a {
  height: 50vh;
}

#c {
  height: 50vh;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 d-md-block d-none" id="b-desktop">B</div>
      <div class="col-md-6">
        <div class="row">
          <div class="col-12" id="a">A</div>
          <div class="col-12 d-md-none d-block" id="b-mobile">B</div>
          <div class="col-12" id="c">C</div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Can we reorder elements when they are present inside different parents?

You can make use of CSS Grid. I played around with a Grid Generator here. Please use full screen mode to view the output.

Note: If anyone can reduce this code, please do since I just dived into CSS Grid.

JSfiddle Demo

.container {  display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  grid-template-rows: 1fr 1fr 1fr 1fr;  grid-column-gap: 10px;  grid-row-gap: 10px;  height: 500px;}
.div1 {  grid-area: 1 / 1 / 3 / 3;  background: #00A2E8;}
.div2 {  grid-area: 3 / 1 / 5 / 3;  background: #22b14c;}
.div3 {  grid-area: 1 / 3 / 5 / 5;  background: #ED1C24;}
@media ( max-width: 600px) {  .div1 {    grid-area: 1 / 1 / 2 / 5;  }  .div2 {    grid-area: 4 / 1 / 5 / 5;  }  .div3 {    grid-area: 2 / 1 / 4 / 5;  }}

/* Additional styles */
.container>div {  color: #fff;  font-size: 2em;  display: flex;  justify-content: center;  align-items: center;}

<div class="container">  <div class="div1">1</div>  <div class="div2">2</div>  <div class="div3">3</div></div>

Twitter Bootstrap 3 rowspan and reorder

Here's the answer. I added some inline style just to visualize this example.

http://jsfiddle.net/qVyLf/

<div class="row">
    <div class="col-sm-7" style="background: green; height: 300px;">
        <p>A</p>
    </div>
    <div class="col-sm-5 b-col" style="background: blue; height: 600px;">
        <p>B</p>
    </div>
    <div class="col-sm-7" style="background: red; height: 300px;">
        <p>C</p>
    </div>

</div>

@media (min-width: 768px) {
    .b-col {
        float: right;
    }
}

Reorder Twitter Bootstrap rows in responsive mode

You can use media queries and display: flex property and order the elements.

But first add custom classes to the 2 col-md-6. I have added .image and .text. Note that I have added the media query for <=768px devices. Change the width to your requirement.

HTML

<div class="container">
 <div class="row padding">
   <div class="col-md-6 text" style="text-align:center;">
     <h2>Phase 2:</h2>
     <p>Lorem ipsum dolor sit amet, no has dicam sanctus gloriatur,  vivendo volumus appellantur ad est. Et elitr qualisque vim. Ad salutandi concludaturque per, nec eu unum tamquam oportere. Ut civibus platonem mel. Pri no appetere conceptam. Assum malorum eum id, vix ne posse dicam.</p>
   </div>
   <div class="col-md-6 image">
     <img src="http://placehold.it/350x150" class="img-responsive" alt="search">
   </div>    
 </div>
</div>

CSS

@media (max-width:768px) {
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .text {
    order: 2;
  }

  .image {
    order: 1;
  }
}

Bootply Demo

Reordering Divs Responsively with Twitter Bootstrap