如何使用jquery mobile根据方向制作3或5柱网轴线

我想用jquery移动响应网格制作一个3列纵向网格和5列横向网格。我尝试了不同的组合，但没有成功。横向效果很好，但纵向模式又有5列

谢谢你的帮助

这是我尝试过的代码之一：

@media all and (orientation : portrait) {
  .my-breakpoint-5.ui-grid-d .ui-block-a,
  .my-breakpoint-5.ui-grid-d .ui-block-b,
  .my-breakpoint-5.ui-grid-d .ui-block-c, 
  .my-breakpoint-5.ui-grid-d .ui-block-d,
  .my-breakpoint-5.ui-grid-d .ui-block-e { 
    width: 33%; 
  } 
}

@media all and (orientation : landscape) {
  .my-breakpoint-5 .ui-block-a,
  .my-breakpoint-5 .ui-block-b, 
  .my-breakpoint-5 .ui-block-c,
  .my-breakpoint-5 .ui-block-d,
  .my-breakpoint-5 .ui-block-e {
    width: 20%; 
  }
}

---

只需在纵向媒体查询中删除ui-grid-d类：

<div class="my-breakpoint-5">
    <div class="ui-block-a">
        a
    </div>
    <div class="ui-block-b">
        b
    </div>
    <div class="ui-block-c">
        c
    </div>
    <div class="ui-block-d">
        d
    </div>
    <div class="ui-block-e">
        e
    </div>
</div>      

@media all and (orientation : portrait) {
  .my-breakpoint-5 .ui-block-a,
  .my-breakpoint-5 .ui-block-b,
  .my-breakpoint-5 .ui-block-c, 
  .my-breakpoint-5 .ui-block-d,
  .my-breakpoint-5 .ui-block-e { 
    width: 33%; 
  } 
}

@media all and (orientation : landscape) {
  .my-breakpoint-5 .ui-block-a,
  .my-breakpoint-5 .ui-block-b, 
  .my-breakpoint-5 .ui-block-c,
  .my-breakpoint-5 .ui-block-d,
  .my-breakpoint-5 .ui-block-e {
    width: 20%; 
  }
}  

A.
B
C
D
E
@媒体和全部（方向：纵向）{
.my-breakpoint-5.ui-block-a，
.my-breakpoint-5.ui-block-b，
.my-breakpoint-5.ui-block-c，
.my-breakpoint-5.ui-block-d，
.my-breakpoint-5.ui-block-e{
宽度：33%；
} 
}
@媒体和所有（方向：横向）{
.my-breakpoint-5.ui-block-a，
.my-breakpoint-5.ui-block-b，
.my-breakpoint-5.ui-block-c，
.my-breakpoint-5.ui-block-d，
.my-breakpoint-5.ui-block-e{
宽度：20%；
}
}  

---

为什么你们要考虑方向，每个人都用宽度作为参数是有原因的。那个原因是什么？我想在移动应用程序中使用此代码。我认为这样做会更好，因为它独立于移动设备的屏幕分辨率。