Bootstrap put container in container fluid - html

Question

I want to make two different column background, for that I set container-fluid, and make two columns, and make another row.. but It don't want to work.
I need like this (PHOTO)
Here is my code
<section id="mid">
<div class="container-fluid mid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6 left">
<div class="container">
<h2>Inovative macaroons</h2>
<div class="media">
<div class="media-left">
<a href="#">
<span class="fa-stack fa-2x media-object">
<i class="fa fa-circle fa-stack-2x bg"></i>
<i class="fa fa-tag fa-stack-1x fa-inverse"></i>
</span>
</a>
</div>
<div class="media-body">
<h3 class="media-heading">Best Prices</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada et.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 right">
<h2> Specials</h2>
</div>
</div>
</div>
</div>
</div>
</section>
In "left" css I made white BG, and In right I made pink.

Answer 1

Use flex css to achieve this. If i am understanding you right, you want both columns to have same height as the one column with the largest height due to text.
Add the following css in your code
.flex-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-row > [class*='col-'] {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
Then apply the flex-row to the row containing the left and right colomns
<div class="row flex-row">
<div class="col-md-6 left">
<div class="container">
Hope this helps.