flexible Column Grid

Question

I have a backend where I can choose dynamically between two block elements one for images and one for text. I want to create flexible layouts for example:

____________________
|__image__|__text __|
|__text __|__image__|
|__text __|__text __|
|__image__|__image__|

and so on… Now my Problem is that I want the textblock to fit my grid row and the image block to take 50% of window width. like so:

My Structure is like this at the moment but I can change it easy if necessary, the only thing I want to use is the div with background-image. For this div im using cover css property

-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
background-position: center center;
background-repeat: no-repeat;

<section class="section textimgblock row fullWidth small-collapse">
        <div class="columns medium-6">
            <div class="rich-text">SOME TEXT</div>
            </div>
        </div>
        <div class="columns medium-6 bgimg" style="background-image:url('/media/images/3_1RSSWbZ.width-800.jpg');">
        </div> 
</section>

Is there a clean css/html method for doing this or should i use javascript? regards Manuel

Answer 1

You can use the techniques from this answer

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
}
.container {
  width: 50%;
  margin: auto;
}
.row {
  display: flex;
}
.row div {
  min-height: 25vh;
  flex: 0 0 50%;
  position: relative;
}
.text {
  background: yellow;
}
.bgimg {
  position: relative;
}
.bgimg:after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 50vw;
  background-image: url(http://lorempixel.com/image_output/abstract-q-c-100-100-5.jpg);
  z-index: -1;
}
.left.bgimg {
  right: 50%;
}

<div class="container">
  <div class="row">
    <div class="left text">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="right bgimg"></div>
  </div>
  <div class="row">
    <div class="left bgimg"></div>
    <div class="right text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, ullam.</p>
    </div>
  </div>
  <div class="row">
    <div class="left text">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="right text">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <div class="row">
    <div class="left bgimg"></div>
    <div class="right bgimg"></div>
  </div>

</div>

Codepen Demo