Адаптивная верстка флекс бокса

containerWithiTwoRow {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 600px;
  margin-top: 30px;
}

columCAR {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  width: 50%;
  height: 90%;
}

.rowInColumn {
  display: flex;
  flex-direction: row;
}

.backgroundRow {
  display: flex;
  background-image: url(/images/rigth.jpg);
  flex-direction: row;
  overflow: hidden;
}

<div class="containerWithiTwoRow">
  <div class="columCAR">
    <div class="rowInColumn">
      <h3 id="miniTitle"> текст </h3>
    </div>
    <div class="rowInColumn">
      <p class="p7"> текст </p>
    </div>
    <div class="rowInColumn">
      <ul>
        <li> <img class="mini1" src="/images/like.png"> текст </li>
        <li><img class="mini1" src="/images/chat.png"> текст </li>
        <li><img class="mini1" src="/images/spical.png"> текст </li>
        <li><img class="mini1" src="/images/credit.png"> текст </li>
        <li><img class="mini1" src="/images/chat.png"> текст </li>
      </ul>
    </div>
  </div>

  <div class="columCAR"> (это второй элемент с картинкой на против)
    <div class="backgroundRow"> <img class="mini" src="/images/rigth.jpg"></div>
  </div>
</div>