Question

我有一个fiddle，其工作方式是项目在移动视图中垂直排列顺时针。

我为实现这一目的而使用的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，时，当我们在移动视图中显示网页时，苹果和芒果图片应位于白框文本（逆时针方向）上方。

我尝试使用以下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;
}
/* ... */
}

如何在html / css中移动视图中反时钟旋转项目？

1 个答案: