Как повернуть элементы против часовой стрелки в мобильном представлении в html / css? - PullRequest
Новая
       6

Как повернуть элементы против часовой стрелки в мобильном представлении в html / css?

0 голосов
/ 05 июня 2018

У меня есть скрипка , которая работает таким образом, чтобы элементы располагались вертикально по часовой стрелке в мобильном представлении.

Коды HTML и CSS, которые я использовал для достижения этой цели:

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%;
}


Постановка задачи:

Мне интересно, какие изменения я должен внести в код CSS, чтобы элементы выровнены по вертикали против часовой стрелки .

В скрипке , изображения яблок и манго должны располагаться над текстом белого поля (против часовой стрелки)когда мы берем веб-страницу в мобильном представлении.

Я пытался использовать следующий код CSS, но он не работал. 

   -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);

1 Ответ

0 голосов
/ 05 июня 2018

Поскольку вы используете макет Flexbox, вы можете присвоить контейнеру с изображениями отрицательное значение order: 

@media only screen and (max-width: 767px)
{
/* ... */
.tvs {
order: -1;
}
/* ... */
}
...