How do I move one column up in a two column bootstrap layout?

Question

I have two column Bootstrap layout with a header image on top.

<section class="header" style="background: url(header-image.jpg)"></section>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 sectionOne">
            <p>some long text</p>
        </div>
        <div class="col-md-6 sectionTwo">
            <form>My form here</form>
        </div>
    </div>
</div>

How do I bring the right column up (class= "sectionTwo"), to cover the header background image (see below)?

   ----------------
  |                |
  |  header image  |
  |        --------|
  |-------|        |
  |       |   2    |
  |   1   |        |
  |       |--------|
  |       |        |
   ----------------

I tried CSS relative positioning on the parent with position: absolute & top: -100px, on the child, but that cause bootstrap to produce a non responsive design.

Answer 1

This code may help you to achieve the Responsive layout you want:

.header{
	width: 100%;
	height: 100px;
	background: yellow;
}

.flexWrapper{
	display: flex;
}

.sectionOne{
	width: 50%;
	height: 200px;
	background: violet;
}

.sectionTwo{
	height: 200px;
	width: 50%;
	background: #3498DB;
	transform: translateY(-40px);
}

<div class="header">Header Image here</div>
<div class="flexWrapper">
  <div class="sectionOne">section 1</div>
  <div class="sectionTwo">section 2</div>
</div>

You can change the Transform and other properties according to your need. You don't have to use Bootstrap for this kind of layout.