My basic requirement was to make a 2 column with 50 % red (left) 50% white(right), left column have texts and right column have Image. It works great with my solution on larger to regular screen. Using bootstrap 4, Naturally 2 column will go from side to side top top and bottom. Since i am making the background color using 'linear-gradient', I made a quick media query and made the colors to top and bottom . 

The Problem is, I am having to always mess with/Write different media queries and one screen size always break like this 
[![enter image description here](https://i.stack.imgur.com/SJIF3.png)](https://i.stack.imgur.com/SJIF3.png)

I wrote multiple media queries and adjustments of color % and max height of the image column. It seems like i am fundamentally doing something wrong. Is there a better bootstrap solution for this ? or a better way css that works on all screen?

```css
.app-headline {
  background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}

@media screen and (max-width: 992px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
  }
  .app-headline .text-content-left {
    background: #d4272e;
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 24rem;
  }
}

@media screen and (max-width: 768px) {
  .app-headline {
    background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
  }
  .app-headline .img-content-right {
    background: #fff;
    max-height: 17rem;
  }
}

@media (min-width: 768px) and (max-width: 768px) {}
```

```html
<html>

<head>
  <title>Products slider</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>

</head>

<body>
<div class="pt-4 pb-4">
  <h1>test</h1>
</div>
  <section class="app-headline border">
    <div class="container">
      <div class="row  py-5 text-white">
        <div></div>
        <div class="col-lg-6 pb-4 text-content-left">
          <div class="text-content-left-texts">
            <div class="inner-push-left">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0 pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6  img-content-right align-self-center">
          <img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
        </div>
      </div>
    </div>
  </section>

  <script type="text/javascript">

  </script>

</body>

</html>

<!-- 
<section class="product-promotion-display border">
    <div class="">
      <div class="row no-gutters d-flex justify-content-center text-white">
        <div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
          <div class="text-content-left-texts p-5 ">
            <div class="inner-push-left offset-lg-3">
              <h1 class="pb-4">H2 Apps Headline Here</h1>
              <P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
                quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
                nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
                labore et dolore magnam. </P>
              <h5 class="pb-1">Features / Benefits</h5>
              <ul class="pl-3 border border-top-0 border-left-0 border-right-0 pb-5">
                <li>Modi tempora incidunt ut labore et dolore</li>
                <li>Amagnam aliquam quaerat voluptatem</li>
                <li>Ut enim ad minima veniam, laboriosa</li>
              </ul>
              <div class="d-flex justify-content-between mt-4">
                <div class="pt-1">
                  <h3>Get The App</h3>
                </div>

                <div class="">
                  <div class="pt-0 ">
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a>
                    <a href="#">
                      <img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
                    </a> </div>
                </div>

              </div>

            </div>
          </div>
        </div>

        <div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
          <img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
        </div>
      </div>
    </div>
  </section> -->
```