0

I have searched all over but couldn't find any ways to achieve the following grid with bootstrap : http://oi60.tinypic.com/2r404rc.jpg

This post came close, but it's not what i wish for : How can I get a Bootstrap column to span multiple rows?

Any ideas if it's possible to do it with bootstrap ? Or should i search for a classic css way instead.

Edit : The html must follow this order 

<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
Community
  • 1
  • 1
AlForStack
  • 13
  • 5

2 Answers2

0

try this

<div class="row>
    <div class="col col-lg-8>
            <!-- col 1-->
        <div class="row">
            <!-- row 1-->
        </div>
        <div class="row>
            <!-- row 2-->
        </div>
    </div>
    <div class="col col-lg-4">
            <!-- col 2-->
    </div>
</div>
Saad Mehmood
  • 691
  • 1
  • 7
  • 19
  • Same as @eminach, this solution is valid if you could change elements order. In my case, i need the elements to be in this specific order : 1 2 3 : http://www.bootply.com/PuXPICBESa – AlForStack Aug 21 '15 at 14:20
0

you should use column nesting

here is an example

http://www.bootply.com/HjJxS7jKHM

Or

<div class="row">
<div class="col-md-6 blue">
    <div class="row">
        <div class="col-md-12 short-div border">Span 6</div>
        <div class="col-md-12 short-div border">Span 6</div>
    </div>
</div>
<div class="col-md-6 green tall-div border">Span 6</div>
</div>
<div class="row">
  <div class="col-md-6 short-div green border">4</div>
  <div class="col-md-6 short-div blue border">5</div>
</div>
Emin Hasanov
  • 1,299
  • 1
  • 13
  • 29
  • Thank you for your answer. Sadly, this isn't working for me. The elements 1, 2 and 3 must follow each other in HTML. Here is and updated bootply showing what i mean : http://www.bootply.com/PuXPICBESa This would otherwise be a valid answer. Maybe it isn't possible with bootstrap alone. – AlForStack Aug 21 '15 at 14:09
  • What it means must follow? you mean 4 and 5 must be bigger than 3? or? – Emin Hasanov Aug 21 '15 at 14:13
  • Or you want say 3 must shrink when 1 and 2 grows? – Emin Hasanov Aug 21 '15 at 14:14
  • As you can see in the previous bootply, element 1 2 3 must be on that specific order. I need the element 2 to take two rows space. Hope i m more precise. – AlForStack Aug 21 '15 at 14:15
  • Because the project I m working on has element 1 and 2 in a partial view, then element 3 in another partial view called just after. The client wish for the mentionned display. I can't move element 2 away from the first partial view without huge refactoring. – AlForStack Aug 21 '15 at 14:24
  • I didn't understand. But you can split them or use ajax call – Emin Hasanov Aug 21 '15 at 14:30
  • Even this answer correct for question. You can mark as answer or 1d it – Emin Hasanov Aug 21 '15 at 14:31
  • Sorry, but it just don't reply to the question. I edited it to clearly show the necessity of the element order. Thank you for your time. Marked as helpfull. – AlForStack Aug 21 '15 at 14:35