0

I have written the following Code in bootstrap:

<div class="col-xs-12 col-md-8">
  <div class="alert alert-warning">
    1
  </div>
</div>

<div class="col-xs-12  col-md-4">
  <div class="alert alert-info">
    2
  </div>
</div>    

<div class="col-xs-12  col-md-4">
  <div class="alert alert-danger">
    3
  </div>
</div>

This gives the below design in mobile:

------
   1
------
   2
------
   3
------

Now, How can i use the same structure of mark up to get following view in Desktop? ::

------------ ------
    1       |   3  |
--------------------
         2
--------------------

Is it possible to do the above structure, If i follow the same mark up ? If not, Please help me with better approach.

Note: I am beginner of bootstrap

HARSHA LANKA
  • 135
  • 1
  • 2
  • 13
  • 1
    You want it 1 then 3 and then 2 or 1 > 2 > 3? – Xahed Kamal Oct 09 '15 at 09:32
  • Yeah! In desktop, I want '1' with sm/md-8 and then '3' with sm/md-4 and '2' with sm/md-12 at bottom. It means 1---->3 and 2 at the bottom of (1 ---> 3) ::Same like how i mentioned in description. – HARSHA LANKA Oct 09 '15 at 09:36
  • See http://stackoverflow.com/a/18070242/258931 – Thomas Oct 09 '15 at 09:39
  • Possible duplicate of [Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3](http://stackoverflow.com/questions/18057270/column-order-manipulation-using-col-lg-push-and-col-lg-pull-in-twitter-bootstrap) – Xahed Kamal Oct 09 '15 at 09:42
  • Reordering columns **on one row** can be done via `push` and `pull`. In your case, I'm afraid that you have to duplicate the out put of your `3` column and use `visible`/`hidden` utility classes to show/hide the correct column. – Hieu Le Oct 09 '15 at 09:43
  • Without hiding, Is it not possible? :( – HARSHA LANKA Oct 09 '15 at 09:45

0 Answers0