Как сделать раздел адаптивным с помощью flexbox?без рамок

Question

У меня есть раздел, который имеет 2 строки, и каждая строка содержит два столбца, вот что я хотел бы иметь в:

Рабочий стол:

На небольших устройствах

Вот HTML:

<section class="portfolio-section">
    <div class="portfolio_top">
        <div class="portfolio-video">
            <img src="https://thumb.ibb.co/hctjZK/left_image.png">
        </div>
        <div class="portfolio-right">
            <h2>Nature from air</h2>
            <p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex. Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. .</p>
            <button class="ask-price" type="button">Ask for price</button>
        </div>
    </div>
    <div class="portfolio_bottom">
        <div class="portfolio-left">
            <h2>Nature from air</h2>
            <p>Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan.</p>
            <button class="ask-price" type="button">Ask for price</button>
        </div>
        <div class="portfolio-video">
            <img src="https://thumb.ibb.co/eW6Soe/right_side.png">
        </div>
    </div>

</section>

Вот мой css, который я пробовал

img{
  width: 100%;
}

.portfolio-section{
    display: flex;
    background-color: #f6f6f6;

    .portfolio-left{
        padding: 190px 70px;
        font-size: 18px;
        font-family: "ProximaNova";
        color: rgb(94, 99, 114);
        h2{
            font-size: 48px;
            font-family: "ProximaNova";
            color: rgb(202, 0, 52);
            font-weight: bold;
        }
        p {
            font-size: 18px;
            font-family: "ProximaNova";
            color: rgb(94, 99, 114);
            line-height: 2;
            text-align: left;
            width: 60%;
        }
    }

    .portfolio-right{
    padding: 190px 70px;
    font-size: 18px;
    font-family: "ProximaNova";
    color: #5e6372;
    /* margin: 0px 230px; */
    margin-left: 272px;
        h2{
            font-size: 48px;
            font-family: "ProximaNova";
            color: rgb(202, 0, 52);
            font-weight: bold;
        }
        p {
            font-size: 18px;
            font-family: "ProximaNova";
            color: rgb(94, 99, 114);
            line-height: 2;
            text-align: left;
        }
    }

}

.ask-price{
    width: 205px;
    height: 50px;
    border-radius: 300px;
    border: none;
    background-color: blue;
    margin-top: 81px;
    color: white;
}

@media (max-width: 768px){
  .portfolio-section {
    display: flex;
    background-color: #f6f6f6;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
}

Вот Jsfidle: http://jsfiddle.net/ew83jpkf/1/ К сожалению, мое решение выглядит некрасиво, когда я пытаюсь реагировать, я изо всех сил стараюсь сделать этот раздел отзывчивым.

Пожалуйста, кто-нибудь может помочь?Что мне нужно изменить в моем коде, чтобы сделать его отзывчивым?любая помощь будет оценена

спасибо всем

Answer 1

Будьте проще.В больших окнах просмотра используйте flex-direction для реверса нужных блоков контента.

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.portfolio-video img {
  display: inline-block;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.portfolio-section {
  background-color: #f6f6f6;
}

.text-block {
  padding: 190px 70px;
  font-size: 18px;
  color: rgb(94, 99, 114);
}

.text-block h2 {
  font-size: 48px;
  font-family: "ProximaNova";
  color: rgb(202, 0, 52);
  font-weight: bold;
}

.text-block p {
  font-size: 18px;
  font-family: "ProximaNova";
  color: rgb(94, 99, 114);
  line-height: 2;
  width: 60%;
}

.ask-price {
  width: 205px;
  height: 50px;
  border-radius: 300px;
  border: none;
  background-color: blue;
  margin-top: 81px;
  color: white;
}

@media (min-width: 767px) {
  .portfolio-section .portfolio-block {
    display: flex;
  }
  .portfolio-block>div {
    min-width: 50%;
  }
  .block-reverse {
    flex-direction: row-reverse;
  }
}

<section class="portfolio-section">

  <div class="portfolio-block">
    <div class="portfolio-video">
      <img src="https://thumb.ibb.co/hctjZK/left_image.png">
    </div>
    <div class="text-block">
      <h2>Nature from air</h2>
      <p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex. Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. .</p>
      <button class="ask-price" type="button">Ask for price</button>
    </div>
  </div>

  <div class="portfolio-block block-reverse">
    <div class="portfolio-video">
      <img src="https://thumb.ibb.co/eW6Soe/right_side.png">
    </div>
    <div class="text-block">
      <h2>Nature from air</h2>
      <p>Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan.</p>
      <button class="ask-price" type="button">Ask for price</button>
    </div>
  </div>

</section>