将标题移到div上方而不使用Javascript

Question

I am trying to make a element-builder (CMS) with which you can drag and drop elements into a page and easily create websites. I am using the bootstrap templates (css,js) to get a responsive website.

The problem is the following:

_col-md-4_______________________
|                               |
| Page Title                    |
|_______________________________|
|           |                   |
|Image      | (main content)    |
|           |                   |
|           |                   |
|div=col-xs-2___div=col-xs-10___|

My title must be aligned above the main content.

I tried to create a responsive result by using Javascript:

<script>$(document).ready(function() {
    var witdh = $(\'.calculate-witdh\').innerWidth();
    $(".title-offset").each(function(){$(this).css(\'margin-left\', witdh)});
    });
    $(window).resize(function() {
    var witdh = $(\'.calculate-witdh\').innerWidth();
    $(".title-offset").each(function(){$(this).css(\'margin-left\', witdh)});
    });
    </script>

But I think there has to be a better solution? Mainly because I don't want each element to load in it's own script.

Example found here: http://jsfiddle.net/abayob/vuskazh1/

Any ideas?

Answer 1

Does this do what you want?

<h1 class="title-offset col-xs-offset-2">Create a title here</h1>

http://jsfiddle.net/abalter/mhqxtppn/