CODEWITHSUNDEEP
twitter-bootstrap-3
Phyo
Phyo

Reputation: 31

bootstrap column ordering with 4 columns

I am trying to do column ordering with bootstrap .On desktop screen i want this order.

------ --------------------
|a    |b         |c        |
------|          |----------  
      |          |d        |
      |          |----------
       ----------

On small screen, i want this order.

------ -----------
 |a    |b         |
 ------|          |  
 |c    |          |
 ------|----------|
 |d    |
 -------

from my code, i get this. Before the images above were wrong. Now I have changed to right images above.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">

  <div class="col-sm-4" style="color:black;background:yellow">A
  </div>
  <div class="col-sm-6" style="color:white;">
    <div class="row">
      <div class="col-sm-12    " style="color:white;background:green">B<br>B<br>B<br>B</div>
      <div class="col-sm-4 col-sm-pull-8  " style="color:white;background:red">C</div>
      <div class="col-sm-12 col-sm-pull-8   " style="color:white;background:blue">D</div>
    </div>
  </div>

</div>

Upvotes: 0

Views: 77

Answers (2)

user2314737
user2314737

Reputation: 29317

You can create one row with two columns of equal size (of class col-sm-6).

Under the leftmost column you nest three rows, that do not need a class because they occupy by default all the available horizontal space (same answer as above )

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-6">
    <div style="color:black;background:yellow">A</div>
    <div style="color:white;background:red">C</div>
    <div style="color:white;background:blue">D</div>
  </div>
  <div class="col-sm-6">
    <div style="color:white;background:green">B<br>B<br>B<br>B</div>
  </div>
</div>

Upvotes: 0

Jonathan
Jonathan

Reputation: 2880

Is this what you trying to achieve?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <div style="background-color:yellow">
                                1
                            </div>
                            <div style="background-color:green">
                                2
                            </div>
                            <div style="background-color:red">
                                3
                            </div>

                        </div>
                        <div class="col-sm-6 col-xs-12">

                            <div style="background-color:blue">
                                4
                            </div>
                        </div>
                    </div>

Upvotes: 1

Related Questions