在移动设备上垂直转换与在台式机水平转换

Question

我有一个UI，我想在移动设备上垂直（窄宽度）上过渡/滑动元素，但在台式机（宽宽度）上水平过渡。对执行此操作的最佳做​​法有何想法？

我当时只是考虑使用CSS媒体查询来处理垂直和水平转换。 jQuery或其他标准库可以做到这一点吗？  你有什么想法吗？

这是一个CSS媒体查询示例，显示了一个简单的悬停过渡。

JSFiddle

<div class="wrapper">
  <div class="content">
    content here
  </div>
</div>

.wrapper {
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
  background-color: blue;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

@media only screen and (max-width: 400px) {
  .content {
    transition: top 1s ease-out;
  }
}

@media only screen and (min-width: 401px) {
  .content {
    transition: left 1s ease-out;
  }
}

@media only screen and (max-width: 400px) {
  .content:hover {
    top: 150px;
  }
}

@media only screen and (min-width: 401px) {
  .content:hover {
    left: 150px;
  }
}