div增加高度，并在Bootstrap中将div移动到它旁边

Question

I'm using Bootstrap right now and i'm having an issue.

This is my code:

<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">...</div>
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">...</div>

My layouts look like this:

But when my calendar height is bigger, this is what happens:

What can I do to fix it?.

Answer 1

I have fixed it! :)

<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    CALENDAR
</div>

<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">
    SECTION 1
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    PICTURES
</div>
<div class="clearfix visible-lg-block"></div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">
    SECTION 2
</div>

Just putting clearfix class where before the layout that is moved worked!

Thanks for the answers!!.

I can't vote up your comments because I don't have enough reputation :(.

Answer 2

Using containers and rows as the Bootstrap team intended, it's easy to keep things aligned:

<div class="container-fluid">
    <div class="row">
        <div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">Calendar
            <br>Calendar</div>
        <div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">Section One</div>
    </div>
    <div class="row">
        <div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">Section Two</div>
        <div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">Section Three</div>
    </div>
</div>

Demo

Answer 3

You should use a wrapper around your calendar and make it .col-md-6 and then another around your second section and add the .col-md-6 class also. Like this, you would make sure that both your section will always talke half the screen. (You can also use other classes sm, xs and etc depeding on the layout you want to have)

For example:

 <div class="col-md-6">
   <div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
 </div>
 <div class="col-md-6">
   <div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">...</div>
 </div>

This way, you'd have to review also for example your seccion and calendar, because now the whol col-md-6 will contains 12 columns also. Hope it helped. You might want to review the Grid system in there also:

http://getbootstrap.com/css/#grid