CODEWITHSUNDEEP
htmlcssalignmentvertical-alignment
ExrowGe
ExrowGe

Reputation: 47

Vertical align on mobile resolution

I want align items on mobile resolution in this order:

Image
Content

Image2
Content2

I have a pen on Codepen.

I tried to accomplish this problem with transform: translate and that worked only on content. Images weren't responsive when the window was resized.

Maybe I should swap the items and then align them because they are in code in this order:

Image
Content

Content2
Image2

But I tried it and it didn't work.

Upvotes: 0

Views: 44

Answers (2)

Brett DeWoody
Brett DeWoody

Reputation: 62743

To change the order of the image/content was can use display: flex; with order. The basic idea is to set the order of the p element within the 2nd .col-md-12 to order: 2 so it's displayed after the image.

We can use a media query to make this swap happen only on small-ish devices.

* {
  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>

Upvotes: 1

Mark Rees
Mark Rees

Reputation: 287

Swap the second image and content around then change the media queries from translate to display: block; I'm sure you can work it from there.

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

Upvotes: 1

Related Questions