CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapcss
Sagar Mistry
Sagar Mistry

Reputation: 131

how to order div in css with help of bootstrap?

I want layout like this enter image description here

desktop

| 1 | 2 | 3 |

tablet and mobile

| 2 |
| 1 |
| 3 |

Upvotes: 1

Views: 490

Answers (4)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10398

  1. Arrange the blocks as they should be on the mobile or tablet.
  2. Use offsetting columns to change the order of the columns on a wide screen:
<div class="col-sm-4 col-sm-push-4">2</div>
<div class="col-sm-4 col-sm-pull-4">1</div>
<div class="col-sm-4">3</div>

Please check the result:

/* Decorations */
.row.decorations > div {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  min-height: 80px;
  padding-top: 6px; 
}
.row.decorations > div:nth-of-type(1) { background: #9c6; }
.row.decorations > div:nth-of-type(2) { background: #f93; }
.row.decorations > div:nth-of-type(3) { background: #69c; }

/* fix SO stick navigation ;) */
@media (min-width: 768px) { .row.decorations { margin-top: 75px; } }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row decorations">
    <div class="col-sm-4 col-sm-push-4">2</div>
    <div class="col-sm-4 col-sm-pull-4">1</div>
    <div class="col-sm-4">3</div>
  </div>
</div>

Upvotes: 0

pep30cula
pep30cula

Reputation: 21

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">2</div>
  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">3</div>
</div>

Upvotes: 0

Ambrish Pathak
Ambrish Pathak

Reputation: 3968

This can be done via JQuery Dom manipulation.

$(window).resize(function () {
    if ($(window).width() < 480) {
        $("#one").insertAfter($("#two"));
    } else {
        $("#two").insertAfter($("#one"));
    }
});


<div class="row">
  <div id="one" class="col-sm-4">1</div>
  <div id="two" class="col-sm-4">2</div>
  <div id="three" class="col-sm-4">3</div>
</div>

Above jQuery code block will insert div with id one after div with id two if window size goes below 480px so, div two will come on top and layout will be like 2,1,3

Else it will arrange the divs as per the order like 1,2,3.

See it here: https://jsfiddle.net/gt8a3f7x/2/

Upvotes: 1

Arturas Lapinskas
Arturas Lapinskas

Reputation: 336

Make a wrapper div with class row, then inside put divs with classes col-md-12 col-lg-4 It will be 12 column width(full width) for medium and small screens, and for desctop it will be 4 column width(4 *3 = 12) Thats it!

Upvotes: 0

Related Questions