0

I have a fiddle which is working in a way that the items lined up vertically clockwise in mobile view.

The HTML and CSS codes which I have used in order to achieve that are:

HTML:

<div class="cloudbasedtextipad" style="display:flex;">
   <div class="cloud-based-text">
     <h6 style="color:black;font-family:'Roboto';font-weight:normal;">XYZ</h6>
      <p style="font-family: 'Roboto'; font-weight: normal;color:#929397;margin-bottom:2.3%;">HELLO WORLD</p>
      <div class="product-quotes">
     <p>I AM GOOD </p>
      <a style="float:right;">Learn More</a>
      </div>
   </div>
   <div class="tvs">

      <div class="tv">
         <img src="https://s15.postimg.cc/yykgtjcqz/mango.jpg" alt="" width="450" height="450" class="aligncenter size-full wp-image-8081">
      </div>
   </div>
</div>

CSS:

@media only screen and (max-width: 767px)
{
div.franchisehubtv, div.cloudbasedtextipad  {
flex-direction: column;
}
.tv img 
{
max-width: 100%;
height: auto;
}   
.franchise-hub-text, .cloud-based-text
{
width: 100%;
}
}
.franchise-hub-text, .cloud-based-text
{
width: 50%;
}
div.franchisehubtv, div.cloudbasedtextipad   
{
display: flex;
margin-left: 15%;
margin-right: 15%;
align-items: center;
background-color: #f0f0f0;
padding: 2%;
margin-bottom: 5%;
}


Problem Statement:

I am wondering what changes I should I make in the CSS code so that the items lined up vertically anticlockwise.

In the fiddle, the apple and mango images should go above the white-box text (which is anti-clockwise) when we take the web-page in the mobile view.

I tried with the following CSS code but it didn't work.

   -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
flash
  • 1,455
  • 11
  • 61
  • 132

1 Answers1

1

Since you're using Flexbox layout, you can give the container with the images a negative order value:

@media only screen and (max-width: 767px) {
  /* ... */
  .tvs {
    order: -1;
  }
  /* ... */
}
mfluehr
  • 2,832
  • 2
  • 23
  • 31
  • Can you update it in the fiddle ? In that way, it would be much easier for me to visualize. – flash Jun 05 '18 at 20:58
  • 1
    [Done.](https://jsfiddle.net/ase48u2q/1/embedded/result) Is that roughly the effect you want? If you want some content (such as "Hello World") to be above the images, you can add more `div`s and `order` properties, as needed. – mfluehr Jun 05 '18 at 21:02
  • It worked, thanks. I have a similar [question](https://stackoverflow.com/questions/50730862/how-to-scroll-the-content-in-the-left-and-right-direction-on-hitting-an-arrow). I am wondering if you can help me out. – flash Jun 06 '18 at 23:38
  • Basically what I want is when I hit the arrows button, the content moves towards the left and right. – flash Jun 06 '18 at 23:39