Html Magento编辑响应css以重新排列列

我的网站的产品页面有两列

col main包含产品，col right侧边栏显示一些块，如（相关产品、广告）

这两列在桌面上工作得很好，但当从移动设备查看产品页面时，右列首先显示。用户必须向下滚动才能查看产品

如果你理解我的问题，例如：一个用户从他的移动设备访问一个产品页面，它首先显示的是相关的产品。访问者从那里离开网站大多数访问者不倾向于向下滚动

如果有人能帮助我使主列显示在第一位，右列显示在第二位。 down是我的主题的主响应.css文件

主题链接： 例如页面链接（尝试调整浏览器窗口的大小）：

@介质（最大宽度：1200px）{
.右收割台顶部。欢迎。col-sm-3{
宽度：100%；
文本对齐：右对齐；
}
.右侧收割台顶部。col-sm-9{
宽度：100%；
}
.产品形象{
最大宽度：无；
宽度：100%；
}
上校：对{
宽度：23%；
}
.block content>img{
宽度：100%；
}
.左框{
宽度：75%；
}
.box left>img，.box right>img{
宽度：100%；
}
.右框{
宽度：24%；
}
.响应功能左{
宽度：65%；
}
.响应功能正确吗{
宽度：30%；
}
.响应显示img>img{
宽度：100%；
}
.右图像>img{
宽度：100%；
}
.反应迟钝{
宽度：100%；
}
.productimage标签{
顶部：170px；
}
左上校{
宽度：25%；
}
.col2布局。col main{
浮动：左；
宽度：70%；
}
.顶车{
边界：无；
}
#sequence>.sequence canvas li>.banner容器{
宽度：100%；
}
.col3布局。col main{
宽度：44%；
}
}
@介质（最大宽度：992px）{
收割台。col-sm-4，收割台。col-sm-6{
宽度：100%；
}
标题。col-sm-6.col-sm-offset-2{
左边距：0；
边缘底部：20px；
浮动：左；
}
.标志{
文本对齐：居中；
浮动：无；
}
.服务{
宽度：49%；
边缘底部：5px；
}
.服务：第n种类型（2n）{
边界权：无；
}
.maincontent.col1-layout{
溢出：隐藏；
}
.categories搜索输入[type=“text”]{
宽度：240px！重要；
}
.产品选项底部。添加到链接{
位置：静态；
}
.相关项目{
边缘顶部：36px；
}
.productimage>img{
高度：自动；
宽度：100%；
}
.显示悬停。添加到链接{
顶部：10px；
}
.display onhover.actions{
顶部：92px；
}
.头衔{
宽度：90%；
}
.副标题{
宽度：50%；
}
.col3布局。col main{
宽度：42%；
}
}
@介质（最大宽度：767px）{
页眉、.maincontent、.brands、#页脚前，页脚{
填充：0.1%；
}
#页脚前{
填充：10px1%；
}
.col-sm-4.wow.slideInRight.animated{
左边距：100px；
}
.重点内容。col-sm-4{
明确：两者皆有；
浮动：左；
边缘底部：10px；
宽度：100%；
}
.右链接{
垫底：15px；
}
.block-footer-bottom-right-links.pull-right.block-copyright.pull-left{
浮动：无！重要；
文本对齐：居中；
明确：两者皆有；
宽度：100%；
}
.块页脚右下链接{
浮动：无；
利润率：10px0；
}
.收割台顶部。col-sm-5{
文本对齐：居中；
}
.收割台顶部。col-sm-7{
宽度：100%；
}
.col-sm-8.向右拉{
浮动：无；
文本对齐：居中；
宽度：100%；
}
/*.迷你产品列表.产品详细信息{
文本对齐：居中；
}*/
.navbar-form.navbar-right{
明确：两者皆有；
显示：内联块；
}
.col-sm-12.top-search{
明确：两者皆有；
浮动：无；
}
.col-sm-12.top-cart{
明确：两者皆有；
浮动：无；
}
.list-inline.pull-right.topcart{
浮动：无！重要；
}
梅因上校{
宽度：100%！重要；
}
.col-right.侧边栏{
宽度：100%；
左边距：0；
}
.添加到框中{
最小高度：150px；
}
.产品img栏{
宽度：100%；
}
.响应功能左{
宽度：100%；
}
.响应功能正确吗{
宽度：100%；
}
.右收割台顶部{
文本对齐：居中；
}
.js#菜单{
显示：无；
}
.产品选项底部。添加到链接{
位置：绝对位置；
}
.反应迟钝{
宽度：自动；
}
.下拉菜单{
位置：相对位置；
宽度：100%；
盒影：无；
边界：无；
}
.下拉列表李{
填充：5px0；
宽度：100%；
z指数：999；
}
.level1.下拉菜单{
左：0；
}
左上校{
宽度：100%；
}
.产品网格.项目{
宽度：100%；
}
.productimage>img{
宽度：自动；
}
.主要内容{
溢出：隐藏；
}
.header.welcome消息，.welcome{
浮动：无；
}
.col3布局。col main{
宽度：98%！重要；
}
.col2布局。col main{
宽度：98%！重要；
}
.navbar nav>li.parent>a:之后{
内容：''；
}
}
@介质（最大宽度：640像素）{
.新闻稿框。框左，.新闻稿框。框右{
宽度：100%；
边界：无；
}
.新闻通讯盒.左框{
边框底部：1px实心#CCC；
}
.通讯盒.右框{
边框顶部：1px实心#fff；
}
.横幅{
显示：无；
}
.左图{
宽度：100%；
}
.中间文本{
宽度：100%；
}
}
@介质（最大宽度：480px）{
.服务{
宽度：100%；
边缘底部：15px；
边界权：无；
边框底部：1px实心#DDD；
}
.服务：第n种类型（4）{
边框底部：无；
}
.欢迎.向左拉{
显示：块；
浮动：无！重要；
边缘底部：10px；
文本对齐：居中；
}
.右收割台顶部{
填充：0；
}
.类别搜索选择{
宽度：90px；
}
.categories搜索输入[type=“text”]{
宽度：120px！重要；
}
.自定义链接{
显示：无；
}
.右收割台顶部{
文本对齐：居中；
}
.sorter.数量、.sorter.排序依据、.sorter.限制器、.sorter.查看模式、.sorter.页面{
宽度：100%；
}
}

使用当前标记，您可以执行以下操作：

向三个div的父容器添加自定义类

重新排序

为父容器指定灵活的长方体布局