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

保持简单。在较大的视口(viewport)上，使用 flex-direction 来反转您想要的内容 block 。

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>