Question

我希望按此顺序在移动设备分辨率上对齐项目：

图像
内容

图像2
内容2

我在Codepen上有一支笔。

我尝试使用transform: translate来解决此问题，并且仅适用于内容。当窗口调整大小时，图像没有响应。

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

图像
内容

内容2
图像2

但是我尝试了它并且它没有用。

Answer 1

交换第二个图像和内容然后将媒体查询从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}
}

Answer 2

要更改图片/内容的顺序，可以display: flex;使用order。基本思路是将order元素的p设置为.col-md-12到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>

垂直对齐移动分辨率

2 个答案: