如何使用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>