html - 如何在 html/css 的移动 View 中逆时针旋转元素？

Question

我有一个 fiddle它的工作方式是元素在移动 View 中顺时针垂直排列。

我使用的 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 代码中进行哪些更改，以便元素逆时针垂直排列。

在fiddle , 苹果和芒果图片 当我们在移动 View 中获取网页时，它应该位于白框文本上方(逆时针方向)。

我尝试使用以下 CSS 代码，但没有成功。

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

Answer 1

由于您使用的是 Flexbox 布局，因此可以为包含图像的容器提供一个负的 order 值:

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