在移动电话上移动内容

Question

我试图在手机上移动一列内容（没有平板电脑），但无法弄明白。最终目标是将自定义字段数据移动到正文文本下方。

经：http://beta.johnslanding.org/portland/canyon-hoops/

.one-fourth.last.right 

试过这个：

@media only screen 
and (min-device-width : 400px) {
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-o-column-break-inside:avoid;
-ms-column-break-inside:avoid;
column-break-inside:avoid;
}

您将在我的iPhone上看到主题将这两列保持在一起：

Answer 1

最简单的方法是将div.three-fourths（您的正文内容）移到HTML中的div.one-fourth（侧边栏内容）上方，如下所示：

<div class="three-fourths">...</div>
<div class="one-fourth last right">...</div>

由于您的内容区域为float:left而且您的侧边栏的float:right具有确切的宽度设置，因此重新排列HTML对其外观的影响不会影响，只有HTML。

然后，清除浮动并设置新宽度以在所需分辨率下填充视口。这将确保它在480px屏幕下的体内容量下折叠。

@media (max-width:30em){
  .three-fourths,
  .one-fourth.last.right{
    float:none;
    width:100%
  }
}