在移动分辨率上垂直对齐

Question

我想按以下顺序在移动分辨率上对齐项目：

图片
内容

图片2
内容2

我在Codepen 上有一支笔。

我试图用transform: translate 来解决这个问题，但这只适用于内容。调整窗口大小时图像没有响应。

也许我应该交换项目然后对齐它们，因为它们在代码中按以下顺序排列：

图片
内容

内容2
图片2

但我试过了，没用。

Answer 1

要更改图像/内容的顺序，可以使用display: flex; 和order。基本思想是将第二个.col-md-12 中p 元素的order 设置为order: 2，使其显示在图像之后。

我们可以使用媒体查询使这种交换只发生在小型设备上。

* {
  box-sizing: border-box;
}

.col-md-12 {
  display: flex;
}

.col-md-12 img {
  width: 200px;
  margin: 0 10px;
}

@media screen and (max-width: 650px) {
  .col-md-12 {
    flex-direction: column;
    
  }

  .col-md-12:nth-child(2) > *:first-child {
    order: 2;
  }
  
  .col-md-12 img {
    width: 100%;
    margin: 0;
  }
  
}

<div id="wrapper">
  <div class="container">
    <div class="row col-md-12 " id="content">
      <div class="col-md-12">
        <p class="obrazek1">
          <img class="img-responsive" src="https://cdn.athemes.com/wp-content/uploads/Original-JPG-Image.jpg">
        </p>
        <div class=" side-arrow-no-border cast1" >Sushi se vždy připravuje z těch nejlepších a čerstvých ingrediencí. Konzumováno by mělo být neprodleně. Profesionální kuchaři vybírají pro přípravu sushi nejčerstvější a kvalitní ryby. Krátkodobé zmražení ryby pod 18° Celsia před samotnou přípravou
          sushi není na závadu, dokonce jej profesionálové doporučují. Zdravotní studie prokázaly, že sushi má velmi dobrý dietetický vliv na lidský organismus. Syrové ryby obsahují důležité látky, minerály a proteiny. Jiné studie prokázaly, že wasabi
          (japonský křen) používaný pro dochucení rýže, a v něm obsažené látky, zastavují množení bakterií v ústní dutině, omezují proliferaci rakovinných buněk a mají antiastmatické účinky. </div>
      </div>

      <div class="col-md-12">
        <p class="cast2 side-arrow">
          Tradiční japonské jídlo sushi má původ v jihovýchodní Asii. Sushi a jeho historie sahá až do 4. století před naším letopočtem. Ryby byly nejdůležitějším zdrojem bílkovin a pro jejich uchování se využívala přírodní fermentace (kvašení) s rýží. Ryby byly
          ukládány do rýže a konzumovány až po několika měsíční fermentaci. Fermentovaná rýže konzumována nebyla. Tento postup se šířil přes Čínu a v 8. století našeho letopočtu se dostal i do Japonska. Japonci spojili konzumaci syrových ryb s rýží a
          toto jídlo se stalo unikátním tradičním jídlem Japonska. Rýže byla jemně ochucována octem a kombinována nejen s rybami, ale i s různými druhy zeleniny a sušených ingrediencí.
        </p>
        <div class="side-arrow-no-border obrazek2 ">
          <img class="img-responsive" src="http://demo.phpgang.com/crop-images/demo_files/pool.jpg">
        </div>
      </div>
    </div>
  </div>

</div>

Answer 2

交换第二个图像和内容，然后将媒体查询从 translate 更改为 display: block;我相信你可以从那里开始工作。

    @media screen and (max-width: 1199px) {
.obrazek1, .obrazek2 {display: block; max-width: 300px}
}

@media screen and (max-width: 991px) {
.obrazek1 {display: block; }
.obrazek2 {width: 40%;display: block;}
}

@media screen and (max-width: 663px) {
.obrazek1 {;min-width: 200px;display: block;}
.cast1 {display: block;border: none;text-align: center ;width: 70% 
!important}
.obrazek2 {border: none;min-width: 200px;display: block;}
.cast2 {display: block;border: none;text-align: center !important;width: 70% 
!important}
}