更改桌面和平板电脑/手机的堆叠顺序（从上到下，从下到上）

Question

有没有办法在响应式设计上从上到下，从下到上改变布局？示例如下所示：

桌面布局

• 价格最高
• 小时和日期在底部

更改平板电脑/手机上的布局（响应式设计）

平板电脑/移动版面

• 小时和日期在上面
• 底部价格

.price{
  background-color: #ededed;
  width: 195px;
  text-align:center;
  font-weight:bold;
 }
 
 @media (max-width: 1023px){
    /* CHANGE LAYOUT */
 }

<div class="price">$ 546.00</div>
26 hours<br/>
16 Oct 2007 - 27 Oct 2018

我没有在代码上显示任何内容，插入到此处以便于理解。如果可能，我不希望display:none用于桌面布局，并为平板电脑/移动设备创建一个新版本。