How to ordering the divs Bootstrap grid

Question

How I can manage the orders of divs?

What I've now:

What I need:

Code:

<div class="row">
    <div class="col-lg-4 bg-info">
        test <br><br><br><br><br>
    </div>
    <div class="col-lg-4 bg-info">
        1
    </div>
    <div class="col-lg-4 bg-info">
        2
    </div>
    <div class="col-lg-4 bg-info">
        test </br></br></br></br></br>
    </div>
    <div class="col-lg-4 bg-info">
        4
    </div>
</div>

What about order in mobile screen? – Mohammad Usman Dec 13 '16 at 11:57 — Mohammad Usman, Dec 13 '16 at 11:57

Mohammad Usman · Accepted Answer · 2016-12-13T12:17:27.040

If it must be done without any change in current HTML, you can add Bootstrap's class pull-right to the right blocks.

Your code structure should be:

<div class="container">
  <div class="row">
    <div class="col-xs-6">test</div>

    <div class="col-xs-6 pull-right">1</div>
    <div class="col-xs-6 pull-right">2</div>
    <div class="col-xs-6 pull-right">test</div>

    <div class="col-xs-6">4</div>
  </div>
</div>

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.bg-info {
  margin-bottom: 10px;
}

<div class="container">
  <div class="row">
  <div class="col-xs-6 bg-info">
    test <br><br><br><br><br>
  </div>
  <div class="col-xs-6 pull-right bg-info">
    1
  </div>
  <div class="col-xs-6 pull-right bg-info">
    2
  </div>
  <div class="col-xs-6 pull-right bg-info">
    test <br><br><br><br><br>
  </div>
  <div class="col-xs-6 bg-info">
    4
  </div>
</div> 
</div>

Example http://www.bootply.com/2sZeyGLJk3 – Manwal Dec 13 '16 at 11:29 — Manwal, Dec 13 '16 at 11:29

score 0 · Answer 2 · answered Dec 13 '16 at 11:27

Every row has 12 units of space. so you can use nested divs to achieve the ovjective

<div class="col-md-4">
    <div class="col-md-12">
           //first box first column
    </div>
    <div class="col-md-12">
          //second box first column
    </div>
</div>
<div class="col-md-4">
    <div class="col-md-12">
           //first box second column
    </div>
    <div class="col-md-12">
          //second box second column
    </div>
     <div class="col-md-12">
          //third box second column
    </div>
</div>

score -1 · Answer 3 · answered Dec 13 '16 at 11:26

-1

You can easily change the order of grid columns with .col-md-push-* and .col-md-pull-* modifier classes. Take a look here for more info.

answered Dec 13 '16 at 11:26

Dawid Rutkowski

2,658
1
29
36

1

Without a code example, this should be a comment rather than an answer. But you're right on the method used to achieve what OP is looking for. – Pepelius Dec 13 '16 at 12:21

How to ordering the divs Bootstrap grid

3 Answers3