Question

我的页面上有两列：

manipulate({ggplot(map.df, aes_string(x='long', y='lat', group='group', fill=ObesityYear)) + 
    geom_polygon()+coord_map()+ 
    theme_bw()}, ObesityYear = picker('obesity09', 'obesity10', 'obesity13'))

在移动设备和平板电脑设备上，我希望右列显示在左侧之前。例如：

Left-Column    Right-Column

任何人如何使用CSS做到这一点？我知道我可以使用Bootstrap来做，但wordpress模板不是使用Bootstrap设计的。

谢谢

Answer 1

这将有助于您What is the best way to move an element that's on the top to the bottom in Responsive design

并检查一下http://cssdeck.com/labs/81csjw7x

Answer 2

如果您不关心浏览器支持，可以使用flexbox。

.container {
    display: flex;
}

.container > div {
    width: 50%;
    padding: 0 15px;
}

@media (max-width: 600px){
    .left-col {
        order: 2;
    }

    .right-col {
        order: 1;
    }
}

http://jsfiddle.net/scdvL0Ly/

这适用于所有主流浏览器以及IE10及更高版本。请参阅CanIuse。

有些浏览器仍需要此功能的前缀。

Answer 3

我会使用flex-box和媒体查询：

#parent {
  display: flex;
  flex-wrap:wrap
}
#parent > div {
  flex: 1 1 40%;
}
@media only screen and (max-device-width: 500px) {
  #parent > div {
      flex: 1 1 100%;
  }
  #left {
    order: 2;
  }
  #right {
    order: 1;
  }
}

<div id="parent">
  <div id="left">
    <span>Left</span>
  </div>

  <div id="right">
    <span>Right</span>
  </div>
</div>

Answer 4

不是很困难，只需使用与其他元素宽度相反的媒体查询中的定位：

.left {
    width: 75%;
    background: red;
}

.right {
    width: 25%;
    background: blue;
}

@media (max-width: 992px) {
    .left {
        left: 25%;
    }

    .right {
        right: 75%;
    }
}

Example

Answer 5

你的问题不是那么清楚。

但是根据目前的知识，保留float:right左栏和右栏float:left。

参见演示：

http://jsfiddle.net/srmpx6Lp/2/

如果您提供代码，我可以更好地了解需求

Answer 6

对于<table>，您还可以将direction: rtl用作父元素，并将direction: ltr用作子元素。

CSS - 交换列

6 个答案: