0

Hello guys I have two Bootstrap rows which look like

<div class="wrapper">
  <div class="row" id="row1">
    <div class="col-md-6" id="col1">...</div>
    <div class="col-md-6" id="col2">...</div></div>
  <div class="row" id="row2">
    <div class="col-md-6" id="col3">...</div>
    <div class="col-md-6" id="col4">...</div>
  </div>
</div>

The out put of this arrangement is

enter image description here

The output I want is

enter image description here

Any Idea how to do this?

Flood Gravemind
  • 3,773
  • 12
  • 47
  • 79
  • Check out http://stackoverflow.com/questions/21241862/twitter-bootstrap-3-rowspan-and-reorder/21242906?noredirect=1#comment32000529_21242906 – Joe Conlin Jan 21 '14 at 17:28

3 Answers3

1

Take a look at mansonry.js or isotope.js.
I am not sure sure, but I think with bootstrap only this is not really possible.
Correct me if I am wrong.

chris
  • 4,827
  • 6
  • 35
  • 53
1

There is also a CSS grid solution like this..

http://bootply.com/107567

Otherwise the masonry or isotope plugin is the way to go..

Bootstrap + Isotope: http://bootply.com/99910

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

Try this - 

<div class="wrapper">
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">...</div>
            </div>
            <div class="row">
                <div class="col-md-12">...</div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">...</div>
            </div>
            <div class="row">
                <div class="col-md-12">...</div>
            </div>
        </div>
    </div>
</div>
Jez
  • 2,384
  • 1
  • 17
  • 31
  • thank you for your answer but it breaks the order for Mobile Media screens. I want to maintain the order if screen is resized or is small. – Flood Gravemind Jan 21 '14 at 17:15
  • What should the order be on mobile? Presumably some boxes will need to collapse under others? – Jez Jan 21 '14 at 17:16
  • The order on desktop is [row1[col1][col2]] then [row2[col3] [col4]]. On a tablet or phone [col1] then [col2] then [col3] then [col4] – Flood Gravemind Jan 21 '14 at 17:19
  • Ah, I get it. I'm not sure you can have the effect you're after and still keep the ordering the same. – Jez Jan 21 '14 at 17:21