垂直对齐移动分辨率

Question

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

图片
内容

图片2
内容2

我在 Codepen 上有一支笔。

我试图用 transform: translate 解决这个问题，但只对内容有效。调整 window 大小时图像没有响应。

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

图片
内容

内容2
图片2

但是我试过了，还是不行。

Answer 1

交换第二张图片和内容，然后将媒体查询从翻译更改为显示：块；我相信你可以从那里开始工作。

    @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}
}

Answer 2

要更改 image/content 的顺序，可以使用 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>

垂直对齐移动分辨率

Vertical align on mobile resolution

html

css

alignment

vertical-alignment