Avoiding automatic margin set in bootstrap span div

Question

I am using bootstrap fluid layout. The layout I desire is as follows:

My html code

<div class="container">
    <div class="row-fluid">
        <div class="span4 well">span4</div>
        <div id="h" class="span8 well ">span8</div>
     </div>
     <div id='calendar' ></div>
</div>

It gives span4 and span8 column in a row for desktop. On a small device, it puts span4 at the top and displays span8 below it. But, when the screen is resized, I wanted to have span8 at the top and span4 below it.

The solution I tried

<div class="container">
    <div class="row-fluid">
        <div id="h" class="span8 well pull-right">span8</div>
        <div class="span4 well ">span4</div>
    </div>
    <div id='calendar' ></div>
</div>

It works but it gives following layout for big screen. span4 leaves some margin initially which I want to avoid.

How can I do that?

Answer 1

Try adding this style:

#x{
    margin-left: 0px;
}

And updating your html to:

<div class="container">
    <div class="row-fluid">
        <div id="h" class="span8 well pull-right">span8</div>
        <div id="x" class="span4 well">span4</div>
    </div>
    <div id='calendar' ></div>
</div>

The id is just trumping this portion of the Bootstrap css:

[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 20px;
}